本文共 2242 字，大约阅读时间需要 7 分钟。

??????????

?? sortablejs ??

???? ??????element ????????

1. ??

?? npm ?? sortablejs?

npm install sortablejs --save

2. ????

??????????

• Sortable.js ??
• Sortable.js ??

3. ????

3.1 ????

?????? sortablejs?

import Sortable from 'sortablejs';

?????????

import Sortable from '@/plugins/Sortable.js';

3.2 ????

var that = this;
setTimeout(function() {
    var el = document.getElementById('sub_items');
    that.sortable = Sortable.create(el, {
        onEnd: function(evt) {
            let itemEl = evt.item;
            let oldIndex = evt.oldIndex;
            let newIndex = evt.newIndex;
            let temp = that.subData[oldIndex];
            if (oldIndex < newIndex) {
                for (var i = oldIndex; i < newIndex; i++) {
                    that.subData[i] = that.subData[i + 1];
                }
            } else if (oldIndex > newIndex) {
                for (var i = oldIndex; i > newIndex; i--) {
                    that.subData[i] = that.subData[i - 1];
                }
            }
            that.subData[newIndex] = temp;
        }
    });
}, 500);

4. ????

??????????????????????????

?? vuedraggable ??

1. ??

?? npm ?? vuedraggable?

npm i -S vuedraggable

2. ????

vuedraggable ??? sortablejs ??????????? Vue ????????????

2.1 ??

?????? vuedraggable?

import draggable from '@/vuedraggable';

2.2 ????

3. ????

????????????????????????????

?? element ??????

1. ????

? element ?????????????????????????????????????? open ??????? DOM ???

2. ????

????????????????????????????