Add Multidrag and Swap plugin support

[david-mohr]

Big thanks to @divinespear for the original Multidrag support in vue.draggable (SortableJS/Vue.Draggable#1052).

I've ported it to Vue 3 (vue.draggable.next). I've also added support for the Swap plugin!

[david-mohr]

@Trojan0523 are you able to provide some code or a jsbin sample that shows the error? I have not seen either of these errors during my testing or production use.

[Trojan0523]

@david-mohr sorry for that, i mount multiDrag plugin in my component twice, it`s my fault, your code is fully successful, thumbs up

[rasmus0201]

Any progress on this? Looking forward to be able to use the :swap="true" prop! :)

[david-mohr]

I haven't had any feedback from the maintainers. Perhaps @David-Desmaisons could please take a look?

[YahorDanchanka]

When swap=true the animation property (on draggable component) does not work.

<draggable
    class="board"
    v-model="boardState"
    item-key="id"
    :swap="true"
    :animation="300"
  >
    <template #item="{ element, index }">
      <div class="board__letter">
        {{ element }}
      </div>
    </template>
  </draggable>

[david-mohr]

@YahorDanchanka It looks like all the animation logic is being applied, so it must be something to do with the way I handle the HTML elements. I'll try to find some time next week to see if I can fix it

[david-mohr]

@YahorDanchanka I've investigated the animation issue and I think I have a solution. Could you please try this out and see if it addresses your use case?

https://github.com/david-mohr/vue.draggable.next/tree/animation

Please note, this is an incomplete update, I'm just testing a theory on how vue and sortable interact

[YahorDanchanka]

Unfortunately, it doesn't work for me.
My draggable state: [ { "value": "l" }, { "value": "e" }, { "value": "q" }, { "value": "x" }, { "value": "e" }, { "value": "s" }, { "value": "" }, { "value": "n" }, { "value": "" }, { "value": "a" }, { "value": "t" }, { "value": "t" }, { "value": "l" }, { "value": "r" }, { "value": "a" }, { "value": "o" }, { "value": "" }, { "value": "o" }, { "value": "" }, { "value": "p" }, { "value": "e" }, { "value": "i" }, { "value": "u" }, { "value": "i" }, { "value": "l" } ]
Component params:

<draggable
        class="board"
        v-model="puzzleLinear"
        itemKey="id"
        :swap="true"
        :animation="300"
      >
        <template #item="{ element }">
          <div class="board__letter">{{ element.value }}</div>
        </template>
      </draggable>

From package.json url of vuedraggable: "vuedraggable": "https://github.com/david-mohr/vue.draggable.next.git#animation"

[retfah]

try both <swap="true"> and <:swap="true"> , i.e. with/out ":"

[david-mohr]

https://github.com/david-mohr/vue.draggable.next/blob/multidrag/example/components/swap.vue

[quilkin]

https://github.com/david-mohr/vue.draggable.next/blob/multidrag/example/components/swap.vue

Hmm, not working for me, sorting still happening.
├── @vitejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]

[david-mohr]

strange... how are you running the test? I recommend using yarn serve from the root of the repo (after installing the depindencies), then switch to the "swap" tab.

[quilkin]

strange... how are you running the test? I recommend using yarn serve from the root of the repo (after installing the depindencies), then switch to the "swap" tab.

I just download the raw code into a VS Code project, which is scaffolded with Vite. Dependencies are listed in my post above (installed with npm not yarn). Sorry, but I don't understand "using yarn serve from the root of the repo "

[david-mohr]

if you clone my branch into a new folder and then open a terminal:

git clone  https://github.com/david-mohr/vue.draggable.next.git
cd vue.draggable.next
git switch multidrag
yarn
yarn serve

It should automatically open a new browser tab with the example project running.

[quilkin]

Thanks for help. I didn't have yarn installed; after I installed it I had an error 'vue-cli-service is not recognized' ; tried to install that and had a ton of errors..... I need an example that will run in VSCode.

[quilkin]

@quilkin swap should work out of the box using :swap="true" on the component. nothing to install as the plugin is already available in a standard install of sortable.js

Are you sure about this? On github it has // Cherrypick extra plugins import Sortable, { MultiDrag, Swap } from 'sortablejs'; Sortable.mount(new MultiDrag(), new Swap());

[linuxnow]

Any chance this is integrated upstream?

[wayanbray]

Hi everyone,
Is multi-drag supposed to be compatible with clone?
Because I'm facing this error when I multi-drag and clone at the same time

Cannot read properties of null (reading 'parentElement')
TypeError: Cannot read properties of null (reading 'parentElement')
    at removeNode (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4376:12)
    at Proxy.onDragRemoveMulti (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:5226:9)
    at Proxy.onDragRemove (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:5197:14)
    at Proxy.eval (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4805:46)
    at Sortable.eval (webpack-internal:///./node_modules/vuedraggable/dist/vuedraggable.umd.js:4816:22)
    at dispatchEvent (webpack-internal:///./node_modules/sortablejs/modular/sortable.esm.js:959:21)
    at _dispatchEvent (webpack-internal:///./node_modules/sortablejs/modular/sortable.esm.js:1006:3)
    at Sortable._onDrop (webpack-internal:///./node_modules/sortablejs/modular/sortable.esm.js:2257:13)
    at Sortable.handleEvent (webpack-internal:///./node_modules/sortablejs/modular/sortable.esm.js:2339:14)

(single-drag with clone and multi-drag without clone works perfectly fine)

[david-mohr]

@wayanbray I haven't done any testing with clone and multi-drag, sorry, but I would have expected it to work. I vaguely remember this error popping up in another thread. I'll see if I can find some time to check it out.

[wayanbray]

Thank you for your reply @david-mohr.
If this can help, I made my own quick fix on onDragRemoveMulti function

// if clone
if (evt.pullMode === "clone") {
  evt.clones.forEach(element => {
    removeNode(element);
  });
  return;
} // remove items and reset transition data

Multi-elements clone data are saved in evt.clones instead of evt.clone for single elements.
This works brillantly <3

Thank you very much for your work on this plugin.

[david-mohr]

@wayanbray awesome, thanks! I've committed the patch

[oclockTwo]

May I ask, has this PR not been merged into vue.draggable.next yet?

[oclockTwo]

I've been stuck with a question for a long time.

I'm using the swap feature of SortableJS in nuxt3, but after the swap, I update the responsive data that was used to swap, however, the data in the page is in the wrong order!

Has anyone else encountered the same problem, I'd appreciate a reply!

[david-mohr]

no, not merged. I'm not sure it ever will be.

I haven't used swap ever, but generally if data is not updating on the page, it's a reactivity problem. In vue, that might mean you need create and assign a new array rather than reusing existing ones.

[handhikadj]

@david-mohr thank you for this.
However, would you update the README on https://github.com/david-mohr/vue.draggable.next/tree/multidrag?
I can't see robust documentation regarding the multiDrag (and the swap) stuff

[mariojankovic]

@david-mohr have you heard back from @David-Desmaisons? If not, it might make sense to fork this.

[david-mohr]

No word from the original maintainers. I would potentially fork this, but right now I am only getting this going so I can use it in my day job. @handhikadj multiDrag works just like the upstream sortable project (as does swap). There are worked examples of each in the example directory. If you run npm serve you can launch the interactive version locally.

[cthom-dev]

when can we get this merged?? its been over two years 😭

[duoluodexiaoxiaoyuan]

Big thanks to @divinespear for the original Multidrag support in vue.draggable (SortableJS/Vue.Draggable#1052).非常感谢 vue.draggable （ SortableJS/Vue.Draggable#1052 ） 中原始的 Multidrag 支持。

I've ported it to Vue 3 (vue.draggable.next). I've also added support for the Swap plugin!我已经将它移植到 Vue 3 （vue.draggable.next）。我还添加了对 Swap 插件的支持！
This branch has not been merged yet, but I need this function of yours, how should I use it?

[david-mohr]

@duoluodexiaoxiaoyuan You can simply reference my git repo and branch in your package.json.

"vuedraggable": "david-mohr/vue.draggable.next#multidrag"

[duoluodexiaoxiaoyuan]

@duoluodexiaoxiaoyuan You can simply reference my git repo and branch in your package.json.

"vuedraggable": "david-mohr/vue.draggable.next#multidrag"

i know, thank you

[duoluodexiaoxiaoyuan]

@duoluodexiaoxiaoyuan You can simply reference my git repo and branch in your package.json.

"vuedraggable": "david-mohr/vue.draggable.next#multidrag"

sorry, recently i find a problem

I want to debug souce code, how i do it.

I edit souce code in my project, it's don't effective. How i do it.

[david-mohr]

@duoluodexiaoxiaoyuan you need to compile your changes:

npm run build

Be aware though, you might run into this depending on your node version: https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported

[duoluodexiaoxiaoyuan]

@duoluodexiaoxiaoyuan you need to compile your changes:

npm run build

Be aware though, you might run into this depending on your node version: https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported

This is how I understand it. Do I execute npm run build, and then copy the files in the generated dist directory to node_modules?

[duoluodexiaoxiaoyuan]

Big thanks to @divinespear for the original Multidrag support in vue.draggable (SortableJS/Vue.Draggable#1052).

I've ported it to Vue 3 (vue.draggable.next). I've also added support for the Swap plugin!

i meet a error
Cannot read property 'nextSibling' of undefined, i don't know how to slove it

[duoluodexiaoxiaoyuan]