Sortable with VueJS

Posted 6 years ago - updated 6 years ago vuejs

• Source
• Sortable

HTML

<div id="app">
    <dragdrop></dragdrop>
</div>

<template id="dragdrop">
    <ul id="sort" class="sort cf">
        <li class="sort-item" order="{{ item.order }}" v-for="item in list">
            {{ item.name }} - ({{ item.order}})
        </li>
    </ul>
</template>

Javascript

new Vue({
    el: '#app',
    template: '#dragdrop',
    data() {
        return {
            list: [
                {name: 'Item 1', id: 1, order: 0}, 
                {name: 'Item 2', id: 2, order: 1}, 
                {name: 'Item 3', id: 3, order: 2}, 
                {name: 'Item 4', id: 4, order: 3}, 
                {name: 'Item 5', id: 5, order: 4}, 
                {name: 'Item 6', id: 6, order: 5}, 
             ],
        }
    },
    ready() {
        var vm = this;
        Sortable.create(document.getElementById('sort'), {
            draggable: 'li.sort-item',
            ghostClass: "sort-ghost",
            animation: 80,
            onUpdate: function(evt) {
                console.log('dropped (Sortable)');
                vm.reorder(evt.oldIndex, evt.newIndex);
            }
        });
    },
    methods: {
        reorder(oldIndex, newIndex) {
            // move the item in the underlying array
            this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
            // update order property based on position in array
            this.list.forEach(function(item, index){
                item.order = index;
            });
        }
    }
});

CSS

ul.sort {
    list-style: none;
    padding: 0;
    margin: 30px;
}

li.sort-item {
    padding: 10px;
    width: 25%;
    float: left;
    margin: 0 10px 10px 0;
    background: #EFEFEF;
    border: solid 1px #CCC;
}

.sort-ghost {
    opacity: 0.3;
    transition: all 0.7s ease-out;
}