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

[alfred-skyblue]

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

[Alfred-Skyblue]

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]

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]

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：

vue-draggable-plus/src/useDraggable.ts

Line 43 in bcc29b3

const CLONE_ELEMENT_KEY = Symbol('cloneElement')

vue-draggable-plus/src/useDraggable.ts

Lines 118 to 135 in bcc29b3

	/**
	* Element dragging started
	* @param {DraggableEvent} evt - DraggableEvent
	*/
	function onStart(evt: DraggableEvent) {
	evt.item[CLONE_ELEMENT_KEY] = clone(unref(unref(list)?.[evt.oldIndex!]))
	}
	/**
	* Element is dropped into the list from another list
	* @param {DraggableEvent} evt
	*/
	function onAdd(evt: DraggableEvent) {
	const element = evt.item[CLONE_ELEMENT_KEY]
	if (isUndefined(element)) return
	removeNode(evt.item)
	insertElement(unref(list), evt.newDraggableIndex!, element)
	}

[kwhur]

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

[kwhur]

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