Sortable.js中文网 (sortablejs.com)
在写后台管理项目时,我们会在弹窗里实现一些排序及拖拽的功能,这个插件库可以满足你的需求,下面是我写过在弹窗里实现排序及拖拽功能的代码,分享给大家。
<div class="listbox" ref="listbox">
<div class="box" v-for="(item, index) in pointsList" :key="index">
<div> {
{ item._id }} </div>
<div> {
{ item.pointName }} </div>
<div> {
{ item.classifyId }} </div>
<close-circle-outlined />
<div class="deldiv" @click="deletebox(index)">+</div>
</div>
</div>
// 实现拖拽排序功能
function initSortable() {
nextTick(() => {
if (!listbox.value) {
return;
}
Sortable.create(listbox.value, {
sort: true,
animation: 200,
onEnd: (evt) => {
const item = pointsList.value.splice(evt.oldIndex, 1);
console.log(evt.newIndex, pointsList.value, item);
pointsList.value.splice(evt.newIndex, 0, item[0]);
console.log(pointsList.value);
},
});
});
}