Add Multidrag and Swap plugin support

[david-mohr]

Big thanks to @divinespear for the original Multidrag support in vue.draggable (https://github.com/SortableJS/Vue.Draggable/pull/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"

[david-mohr]

@YahorDanchanka you're missing a unique identifier per object (the itemKey). I'm fairly sure this is part of the issue.

[david-mohr]

@YahorDanchanka ah, sorry, my fault. I forgot to compile the code before pushing it. Could you please pull the latest version and try agian? If that still doesn't work, I'll spin up a more comprehensive test.

[YahorDanchanka]

-> you're missing a unique identifier per object (the itemKey). I'm fairly sure this is part of the issue. I have a Symbol('id') as id -> ah, sorry, my fault. I forgot to compile the code before pushing it. Could you please pull the latest version and try agian? If that still doesn't work, I'll spin up a more comprehensive test. Now it is working. Thank you.

[ml1nk]

We tested swap with the animation branch and it worked like before in vue2. Hopefully it gets merged this time, installing from git isn't nice.

[retfah]

With which version of Sortablejs should this branch work? I could not manage to make it work with the regular 1.15.0. It always deletes both involved elements. ( I'm working on another plugin to sortablejs/vue.draggable to allow "replacement" instead of "swap")

[david-mohr]

@retfah 1.15.0. If you let me know your config and some example code, I can hopefully try to help identify what's wrong.

[retfah]

@david-mohr Thank you for your support. I must confess, I gave it up on the weekend and created my own drag-drop code with swap and replace, directly based on the html-Drag-Drop-API. This was surprisingly simple. Nevertheless, I'm still using draggable in many other places in my code and will surely update to the latest version, when your pull request is implemented!

[gaetandezeiraud]

I have "sometime" the following error with your fork. Only when multi-drag is enabled.

sortable.esm.js:3448 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'isMultiDrag')
    at MultiDrag.dragOverAnimationCapture (sortable.esm.js:3448:84)
    at sortable.esm.js:850:46
    at Array.forEach (<anonymous>)
    at Function.pluginEvent (sortable.esm.js:838:13)
    at pluginEvent3 (sortable.esm.js:964:42)
    at dragOverEvent (sortable.esm.js:1867:7)
    at capture (sortable.esm.js:1887:7)
    at Sortable._onDragOver (sortable.esm.js:2112:11)
    at Sortable.handleEvent (sortable.esm.js:2348:16)

With nested draggable. Nothing more special. Can't figure out why. This prevent drag & drop. It is when I tried to move a nested component to the parent level, the error prevent the action.

Edit 1: If I set :multi-drag="false" to parent, no more problem. But I loose the multidrag support.

Edit 2: No more problem if I removed animation: 200, ghostClass: 'ghost',.

[david-mohr]

@Brouilles are you using the multidrag or the animation fork? Animations don't work on the plain multidrag branch

[gaetandezeiraud]

I use https://github.com/david-mohr/vue.draggable.next.git#multidrag

[david-mohr]

yeah, unfortunately animations are a bit tricky and completely untested with nested. You are welcome to try out the animation branch to see if that will help

[gaetandezeiraud]

Hello and thank you. Sadly, same issue with the animation branch.

[quilkin]

I'd like to use the swap plugin (is it this one? but don't know how to install it into a vue project. Can someone help?

[david-mohr]

@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

[david-mohr]

@Brouilles hmm, that code snippet explains why the "fixes" you mentioned address the issue, but unfortunately that's in the sortable code, not the vue part. So I'd say that disabling animations is the workaround.

[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

Thanks for reply, I tried that on the 'Simple' example, but sorting still occurring. I then changed the Vue API to Composition/SFC and tried again. Found out that if I define the list as Reactive() then "swap" does not work. If the list is fixed then "swap" does work! 'app.vue' file attached. (btw, this file uses Vuetify components but I was seeing the problem before I added those)

app.zip

[david-mohr]

@quilkin there is a swap example. It works as expected, perhaps this might help your debugging?

[quilkin]

@david-mohr That sounds good, but I couldn't find one! Can you possibly point me towards it? Thanks

[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.