sagalbot / vue-sortable

A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable
http://sagalbot.github.io/vue-sortable/
MIT License
721 stars 104 forks source link

Multiple lists #21

Open minedun6 opened 7 years ago

minedun6 commented 7 years ago

Is it possible to use multiple lists, I need to do something like what Trello provides, I'm building a Kanban board and I need to move items between lists.

mygnu commented 7 years ago

I would love to see that, and can help testing

minedun6 commented 7 years ago

U can here's my email if you want yuginim@gmail.com

tarpey commented 7 years ago

I managed to get it working with this:

<ul v-sortable="{ group: { name: 'list-a', put: ['list-a', 'list-b'] } }"> <li class="list-group-item>One</li> <li class="list-group-item>Two</li> <li class="list-group-item>Three</li> </ul>

<ul v-sortable="{ group: { name: 'list-b', put: ['list-a', 'list-b'] } }"> <li class="list-group-item>Four</li> <li class="list-group-item>Five</li> <li class="list-group-item>Six</li> </ul>

benjaminwy commented 4 years ago

According to the SortableJS group option documentation, the generic way to set this up is to give your lists the same group name and set pull and put to true.

<ul v-sortable="{ group: { name: 'list', pull: true, put: true } }">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<ul v-sortable="{ group: { name: 'list', pull: true, put: true } }">
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>