Vue.draggable: support for dynamic lists

[vccampbell]

I have developed a kanban-style board and run into issues when not using the list property. I don't know what the lists are until run-time since they're dynamically generated based on a status column. I have it generally working using a v-for to build out the swim lanes.

I either need to figure out how to implement this using the list property or have the cancellation support when not using the list property.

Any ideas on either of these approaches?

[David-Desmaisons]

I don't understand the issue: the property list is reactive so if you change it "dynamicly" changes will be reflected.

[vccampbell]

Hi David, here's a jsfiddle that demonstrates what I'm doing. In the checkMove function, I can't seem to be able to cancel the move. You'll also see that once the item is dropped, it is reverted to its original position. Setting :list to null seems to correct the issue of it reverting back to its original position.

https://jsfiddle.net/ka2gh2wy/

[David-Desmaisons]

What do tou want to achieve you can't?

[David-Desmaisons]

You should have 3 draggable element, one for each list.

[vccampbell]

I guess that's the issue. I don't know if I'll three, five, etc "lists". the lists are not determined until runtime. I need the ability to cancel a move if the move is deemed invalid.

[David-Desmaisons]

then you will you use a v-for for each group pseudo-code:

<div v-for="list in lists">
    <draggable v-model="list">
          ......
     </draggable>
<div>

[anselmobattisti]

This post save my day!

Im using the wrong reference in model!!! and your post helps me to see it

Tnks a lot