SortableJS / Vue.Draggable

Vue drag-and-drop component based on Sortable.js
https://sortablejs.github.io/Vue.Draggable/
MIT License
20.19k stars 2.9k forks source link

Dragged element gets stuck when different draggable is destroyed #1199

Open lucaplays opened 1 year ago

lucaplays commented 1 year ago

Reproduction

https://codesandbox.io/s/gracious-shamir-djq5iw?file=/src/App.vue 2023-04-06_08-41-58_AdobeExpress_AdobeExpress

Scenario

Vue.Draggable's normal behavior clears the Sortable (including the currently dragged element) before the draggable element is destroyed. If the dragged Element is from the draggable that is being destroyed, everything works as intended. Sortable is cleared and the other draggables continue to work. However if the dragged Element is from another draggable, it gets stuck mid drag.

See attached GIF and code at https://codesandbox.io/s/gracious-shamir-djq5iw?file=/src/App.vue.

Steps to Reproduce

  1. Start dragging an element from the first draggable
  2. Wait 4 seconds until second draggable is destroyed

Describe the bug

Dragged element gets stuck mid drag when different draggable is destroyed.

Expected Behavior

Dragged element should be unbothered if it is from another draggable.

Actual Solution

I played around in the Sortablejs destroy method which is called from vue draggable which fixed this bug.

current destroy:

destroy: function destroy() {
     ...

      this._onDrop();

      ...
    },

updated destroy:

destroy: function destroy() {
     ...

      if (el === rootEl) this._onDrop();

      ...
    },

Version

package version
sortablejs 1.10.2
vuedraggable ^2.24.3