search

Alfred-Skyblue / vue-draggable-plus

Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2
https://vue-draggable-plus.pages.dev/en/
MIT License
2.72k stars 106 forks source link

Drag-and-Drop Issue between Two List Components Using Draggable-Plus and Sortable #53

Closed kwhur closed 8 months ago

kwhur commented 8 months ago

There are two list components, A and B. Component B is utilizing draggable-plus, and they are not part of the same group. However, there are cases where they need to process list items from each other. Items can be dragged from component A and dropped into component B, triggering the onDrop event, and it works fine. However, dragging items from component B to component A is disabled.

When replacing draggable-plus with sortable, the drag-and-drop functionality works as expected. Is this issue related to draggable-plus? If so, what is the solution to enable drag-and-drop from component B to A while using draggable-plus?

Alfred-Skyblue commented 8 months ago

Let me make it clear that your A component uses sortable and B component uses draggable-plus. Do you need to drag the elements in B component to A component?

kwhur commented 8 months ago

Yes, A is using Sortable and B is using draggable-plus. A represents a folder tree, while B represents a file list. I am implementing a feature to drag file items from B and drop them into the folder tree of A to move the files.

Alfred-Skyblue commented 8 months ago

In fact, if you are using "draggable-plus," you need to add an element to the two-way bound list when dragging to the target list. It's possible that the element was not added to the list when the drag ended because it wasn't retrieved at that point. This could result in a failed drag operation because when dragging, a bound data is added to the drag target element. However, for security reasons, I've set this bound key as a Symbol type, so it cannot be set from the outside. Would you consider using both components "draggable-plus" and "draggable" to solve this issue?

Related code： https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/bcc29b3f36ea33321aaa446b4d3a67bdc19d5865/src/useDraggable.ts#L43

https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/bcc29b3f36ea33321aaa446b4d3a67bdc19d5865/src/useDraggable.ts#L118-L135

kwhur commented 8 months ago

Wow, your response is incredibly quick. Thank you so much. I'll give it a try immediately.

kwhur commented 8 months ago

I've replaced Sortable with Draggable-plus and it resolved the issue. I'm truly grateful for the excellent library and your rapid support.