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/

posted @ 2026-01-29 11:36  青争竹马  阅读(1)  评论(0)    收藏  举报