Vue.draggable: Multiselect / multidrag support

[matrunchyk]

Hello,

Just wondering maybe you have some time to add multiselect / multidrag support. Would be nice to have an ability to press Ctrl/Command and click on items for dragging.

Thank you!

[David-Desmaisons]

Hello @matrunchyk , there is no multidrag support this is a restriction from Sortable.js

[rwam]

Hi, the next-version of Sortable.js supports multidrag now. It would be great to see this in this project too.

[David-Desmaisons]

@rwam Thanks for the hint, I will definitevelly provide.

[rwam]

Hi @David-Desmaisons,

that would be great. For now I'm trying to use yarn's Selective dependency resolutions and add it to my package.json:

  "resolutions": {
    "vuedraggable/**/sortablejs": "git+https://github.com/SortableJS/Sortable#next-version"
  },

and on normal drag & drop behavior the plugin works like expected. But on a multiple drag in a nested list I get an error:

Uncaught TypeError: Cannot read property 'parentElement' of null
    at s (vuedraggable.umd.min.js?1980:1)
    at VueComponent.onDragRemove (vuedraggable.umd.min.js?1980:1)
    at Sortable.eval (vuedraggable.umd.min.js?1980:1)
    at _dispatchEvent (Sortable.js?53fe:2096)
    at Sortable._onDrop (Sortable.js?53fe:1649)
    at Sortable.handleEvent (Sortable.js?53fe:1742)

The first element will be inserted correctly. The error occurs on the second item of the multi selection. I'm not sure if this is a problem of Vue.Draggable or Sortable itself. Or a problem in combination with nested lists.

[rwam]

Ok, there are some issues with this plugin. First it has to support the new evt.clones property. To fix the mentioned error I'v tried:

diff --git a/src/vuedraggable.js b/src/vuedraggable.js
index 38efd61..588570c 100644
--- a/src/vuedraggable.js
+++ b/src/vuedraggable.js
@@ -397,7 +397,13 @@ const draggableComponent = {
     onDragRemove(evt) {
       insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
       if (evt.pullMode === "clone") {
-        removeNode(evt.clone);
+        if (evt.clones) {
+          evt.clones.forEach(clone => {
+            removeNode(clone);
+          });
+        } else {
+          removeNode(evt.clone);
+        }
         return;
       }
       const oldIndex = this.context.index;

The error is gone but there are some other issues. May I get it working on the weekend.

[scriptcoded]

Any updates here @David-Desmaisons ? The plugin has been released and is now in the official Sortable.js documentation.

https://github.com/SortableJS/Sortable#plugins