<ul class="contentBox">
<li class="contentItem" v-for="item in settingMenuListInfo" :key="item.portfolioId">
<p class="typeName">{{ item.typeName }}</p>
</li>
</ul>
一、安装插件
npm install sortablejs --save
二、引入插件
import Sortable from 'sortablejs';
三、使用
function rowDrop() {
const el= document.querySelectorAll('.contentBox')[0] as HTMLElement;
Sortable.create(el, {
animation: 150,
delay: 0,
disabled: false,
// 结束拖拽后的回调函数
onEnd: (evt: { newIndex: any; oldIndex: any }) => {
console.log(evt.newIndex,evt.oldIndex)
// const currentRow = state.sortTable.splice(evt.oldIndex, 1)[0];
// state.sortTable.splice(evt.newIndex, 0, currentRow);
},
});
}
onMounted(() => {
rowDrop();
});