Vue.Draggable icon indicating copy to clipboard operation
Vue.Draggable copied to clipboard

Dragged element gets stuck when different draggable is destroyed

Open lucaplays opened this issue 2 years ago • 0 comments

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

lucaplays avatar Apr 06 '23 08:04 lucaplays