react-beautiful-dnd | Beautiful and accessible drag and drop for lists with React | Widget library

I want to delete a list, and style that button with an icon. If i just have "delete" as my button, my onClick returns the ID as expected. However, when I try to use a component for my button, it returns a weird object.

I tried using different elements instead of a and different icon libraries, but it results in the same behavior. This is how I was importing the component and I am using styled-components if that matters

I have tried to implement Drag & Drop feature in Mui TabList using react-beautiful-dnd. The dnd is working fine but, I am facing an issue making horizontal list of tabs auto scroll while dragging when there are too many tabs to fit in the screen and the variant prop of Mui TabList is scrollable. See this codesandbox example - https://codesandbox.io/s/draggable-and-scrollable-mui-tabs-xqgl77. This seems like a standard use case, so there must be some solution. Please refer my code below -

App.js

I've tried to make a horizontal list of MUI buttons draggable with react beautiful drag and drop. But it doesn't seem to be working.

I wrapped up my buttons with , ,and tags. Here's the code.

I'm using react-beautiful-dnd to let the user choose the options using drag and drop.

However, the component doesn't seem to re-render when the order of the options is changed. (I've tried console logging it, and it appears to have changed.)

This is the onDragEnd method:

I have the following code I am trying to port to TypeScript:

How can I drag several words from a sentence by highlighting the selected words and being able to drag and drop from one text box to another using react-beautiful-dnd?

Row should get dragged to its destination index when dragged from top to bottom and vice versa with DnD animation.

Row doesn’t get DnD when dragged from bottom to top index. Top to bottom drag works but the item is added after the last page index and not to the destination index. DnD animation seems not to be working as well.

You can refer this sandbox to replicate the issue.

Case 1: Top to bottom drag

1. Try to drag and the row from top to bottom index
2. you will see the row gets dragged to last index of the page not the destination index

Case 2. Bottom to Top drag

1. Try to drag and the row from bottom to top index
2. you will observe the rows doesn’t get dragged and onDragEnd is not called.

The same code works with react-virtualized's List component but not the Table component.

16.13.0

13.0.0

9.22.3

Chrome

I have created this sandbox to replicate the issue. You can run this to check the issue.

https://codesandbox.io/s/vertical-list-forked-3lp71?file=/index.js

Can anyone take a look at the sandbox and help me out? Let me know if you need another info!

So today, I debug this more and made some progress. Looks like the issue was with rowRenderer implementation. There was an extra wrapper div on top of defaultRowRenderer's dom. I was able to solve the issue partially. Here is the new sandbox link with the updated code.

Now, there's one issue left is scroll doesn't work while dragging the row. Any pointers how can I fix this?

I'm using the react-beautiful-dnd component to create a draggable list. I get backend data sorted by the sequence field. After dragging and dropping the item, I use the reorder function to create a new list. This is where I'm having problems! I need to create a new array by reordering the 'sequence' field based on newItems to save the new string in the backend. How can I do this?

Initial result

I am using React Beautiful DnD to create a nested list. I know this is not supported by the library, but I've seen plenty of workarounds and my use-case is relatively simple (no dragging sub-list elements between parent lists; sub-list elements can only be dragged within their respective sub-list).

The issue is as follows: trying to drag elements from the nested list sometimes drags the parent list elements instead. (I just made a long post documenting my problem here.)

I haven't gotten any responses yet, so I stared thinking about other ways to potentially solve the problem. I realized one solution could be choosing only a specific area of each list element that can be clicked to drag, and making sure this area does not overlap between the parent/nested lists.

Seeing that this is possible here, I simply need to add {...provided.dragHandleProps} to the element that I want to serve as the drag handle.

However, my nested list is built using two instantiations of a reusable DnDList component that I wrote, so it gets a little more complicated. Rather than trying to figure out how to specify a drag handle as props, I'd like to just set the drag handle to be list item marker for each list item (the '1', '2', '3', etc next to each list item).

How can I add {...provided.dragHandleProps} to the li::marker elements of my list?