sortablejs 拖拽库 在Vue 组合模式下的使用
<ul ref="listRef">
<li v-for="(item,index) in dataList" :data-id="item.id" :key="item.index" class="draggable">{{item.sort}}.{{item.name}}<icon class="handle"></icon></li>
</ul>
const dataList = shallowRef([])
const listRef = ref();
onMounted(() => {
const srotableObj = new Sortable(listRef.value.$el, {
animation: 150,
handle: '.handle',
draggable: '.draggable',
onEnd: () => {
const ids = srotableObj.toArray()
ids.forEach((id, index) => {
dataList.value.find(x => x.id == id).sort = index + 1;
})
triggerRef(dataList);
}
});
}
参考文档手册 https://sortablejs.com/

浙公网安备 33010602011771号