SortableJS / vue.draggable.next

Vue 3 compatible drag-and-drop component based on Sortable.js
https://sortablejs.github.io/vue.draggable.next/#/simple
MIT License
3.91k stars 531 forks source link

Chosen item lost reactive data that's set after drag start when moved to other list. #116

Closed ga676005 closed 2 years ago

ga676005 commented 2 years ago

I have a draggable list and each list item has an input checkbox. If I drag a item that is not currently checked, I want to make it the only item checked in the list.

I run into an issue that when the chosen item is moved to different list, the chosen item will lost the latest reactive data and go back to the previous states, and when I keep dragging the chosen item and move it back to its original list, the reactive data will update to the latest snapshot. This only happens on the chosen item. And it doesn't trigger any life cycle hook and watchers.

This is how I update check list after drag start so the checkbox of the chosen item will be checked, and the checkbox of the other items will be unchecked.

const onDragStart = () => {
  referenceStore.selectedReferencesIdList = [ draggedTargetId ]
}

I inspect this issue with devtools and I've found that when item is dragged to other list, even with the option pull set to 'clone' like :group="{ name: '...', pull: 'clone' }", the item will still be removed from the DOM and replaced by an element that was cloned right before drag start. So I think If I can prevent the item from being removed from the DOM. This issue could be solved. Is there an option for this purpose?

pedrinhoas7 commented 1 year ago

:group="{ name: '...', put: true }"