I followed the quick start for the dnd kit React library, and it lets me drag and drop just fine with a mouse. However, when I try to use the same page with Chrome on Android, I can't drag the item. It looks like it starts moving and then gets stuck as soon as my finger moves outside its original border.
I tried switching to the drag overlay, but that didn't seem to make any difference.
How can I support touch users with dnd kit?
It wasn't covered in the quick start, but I found the answer in the Draggable section's recommendations:
In general, we recommend you set the touch-action property to none for draggable elements in order to prevent scrolling on mobile devices.
I found that I could either set the CSS style on the draggable element itself, or on a parent element that contains several draggable elements.
However, when I started trying to drag items around within a list or grid of items, that stopped working. Eventually, I had to switch from using the pointer sensor to using the mouse and touch sensors, as described in the sensors section.
Related
I am building something like trello board that has dnd feature between columns and items inside the column. I want to build auto-scrolling when dragging the item to the end of parent container.
But I am getting warning whenever dragging items
It seems like react-beautiful-dnd doesn't support multi scroll container like trello.
Don't we have solution for this? or do we need to implement it by controlling the scrollbar manually?
You can check the issue correctly from below video.
https://www.screencast.com/t/0MLoafdls
Thanks in advance
After struggling in order to resolve this issue, I turned out to use another dnd library - https://dndkit.com/, it resolved all the issues that I had in react-beautiful-dnd
React newbie here.
I am looking for a way to add drag and drop functionality to my website. The goal is to move cards in a grid (I am currently using tailwind css to handle the grid). I found a few libraries that enable drag and drop but none that would:
work in a grid, i.e. in 2D
snap the cards to the grid
reorganize the cards when one is moved (to prevent overlapping)
I tried using react-beautiful-dnd but it seems to only be suitable for lists (i.e. 1D). I also tried react-dnd but I couldn't make it work either, I don't think it is meant to be used in a grid.
I found some libraries that do exactly what I want in angular (https://stackblitz.com/edit/angular-dragdrop-grid) and in vue (https://codesandbox.io/s/j4vn761455), but I can't seem to find react equivalents.
Would you know a react library I could use?
Thanks
In searching around, I have not been able to find information about generic support in Codename One for gestures generally, and swipe in particular.
I see I can easily set up swipe on a form to return to a prior form, and there is a way to create swipeable containers that work a specific way to rework the display of that container, but what if I just generally want to capture a swipe event - ideally on a container but if not that then on a form - and then take some specific action when that event occurs?
We don't support a high level gesture API. Most of those are inconsistent across platforms and pretty hard to work with so we never built one.
APIs such as tabs include the ability to swipe between containers, and image viewer allows swiping images. Those come up to about 90% of the use cases for swiping.
In other cases people just use a drag motion listener to detect the right level of drag and determine a swipe/pull.
Notice that drag and drop isn't swipe and we do support that with a special API.
I am using Ant Design's draggable table in a project. I am using the source code that is available for the example on their website. It works fine with drag and drop functionality but I want to change the animation when I am dragging a row. Right now it shows the snapshot of the row selected while dragging it around.
I went through the React-DnD documentation, since it is what is being used by antd. In it, there is a mention of DragPreviewImage. Now I assume it would be what is required but since I am very new to it, I am having a hard time in discovering how to fit what they say into the simple example given on the antd's website.
Following is the link to the sandbox: https://codesandbox.io/embed/dazzling-sammet-e41lf
I would like anyone's help to show me how we can change the drag animation in this source code. I will be very thankful.
I am trying to add DnD support for touch enabled devices for react-ui-tree and it seems to be behaving weirdly. While dragging seems to start with touchmove event and stops abruptly. But if you pickup from the same position and move, then things seem to work. Here is the GIF file just to show that.
Observations so far:
Seems react is somehow not happy with tree being modified with
tree.move() inside drag() method.
Seems react is somehow not happy with setState().
When drag starts and suddenly stops, we see the page scrolls so guessing the event has stopped midway by
react but not sure.
All my changes are in this repo https://github.com/venugopalkathavate/react-ui-tree.git if you want to check. NOTE this can be reproduced with Chrome dev tools.