Skip to content

Dragged element gets stuck when different draggable is destroyed #1199

@lucaplays

Description

@lucaplays

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions