拖拽效果库sortablejs

介绍

sortable可以适用于列表，表格以及弹窗等等的拖拽效果，使用起来也很简单，参考文档
像elementui等组件库没有拖拽等一些功能就可以使用sortablejs来解决这个问题

使用方法

表格的使用

比如我要拖列救获取tr，拖行可以用tbody
注意拖行拖列都要用onEnd进行修改tableData的顺序不然会出现只拖动了表头低下不动的情况

const elTr = document.querySelector('tr')
    Sortable.create(elTr, {
        animation: 180,
        delay: 0,
        scroll: true,
        onEnd: (evt) => {
            ...
        }
    })

列表的使用

列表拖动选的节点是ul（不是li！）

const el = document.querySelector("ul");
    Sortable.create(el, {
        group: 'groupName',
        sort: true,
        animation: 180,
        onEnd: function (evt) { //拖动结束后的对调函数
            ...
        }
    })

示例代码

<template>
    <div>
        <ul>
            <li v-for="(item, index) in List" :key="index" class="list">{{ item }}</li>
        </ul>
    </div>
</template>
<script setup>
import Sortable from "sortablejs";
import { onMounted, ref } from "vue";

const List = ref([111111, 222222, 333333, 4444444, 5555555, 6666666, 7777777])

const dragFun = () => {
    const el = document.querySelector("ul");
    Sortable.create(el, {
        animation: 150, // 动画参数
        onEnd: function (evt) { //拖动结束后的对调函数

        },
        onChoose: function (evt) { //拖动开始后的对调函数
            const list = document.querySelectorAll("li");
            list[evt.oldIndex].className = 'chosenClass';
            for (let item of list) {
                if (item != list[evt.oldIndex]) {
                    item.className = 'list'
                }
            }
        },
        onUnchoose: function (/**Event*/evt) {
            // same properties as onEnd
            const list = document.querySelectorAll("li");
            list[evt.oldIndex].className = 'list';
        },
    })
}


onMounted(() => {
    dragFun()
})
</script>

<style>
.list {
    height: 30px;
    line-height: 30px;
    background: #e9e9e9;
    margin: 5px;
}

.chosenClass {
    height: 30px;
    line-height: 30px;
    margin: 5px;
    color: white;
    background: skyblue;
}
</style>

（不知道为什么转成gif会糊掉，勉强看吧）