sortablejs也支持不是表格的拖拽

概要

之前使用sortablejs都是拖拽表格，这次有个需求是直接拖拽div，发现原来也可以，就记录一下下

展示效果

代码展示

提示：sortablejs使用的版本是 "sortablejs": "^1.15.0",

<template>
   <div class="darg_label">
        <span class="darg-item"
        :title="item.name"
        v-for="item in list" :key="item.id">{{ item.name }}</span>
    </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
    data() {
        return {
           list: [{
            id: 1,
            name: '1'
           }, {
            id: 2,
            name: '2'
           }]
        }
    },

    activated() {
        this.sortTab()
    },
    methods: {
        sortTab() {
           // 获取需要拖拽节点的父节点
            const box = document.querySelector('.darg_label');
            console.log('box', box)
            // 创建拖拽实例
            Sortable.create(box, {
                animation: 150, // 动画
                handle: '.darg-item', // 需要拖拽的元素类名称
                // 开始拖动事件
                onStart: (e) => {
                console.log('开始拖动', e);
                },
                // 结束拖动事件
                onEnd: ({ newIndex, oldIndex }) => {
                    this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
                    let newArray = this.list.slice(0);
                    this.list = [];
                    this.$nextTick(() => {
                    this.list = newArray
                });
            }
            });
        }
    }
};
</script>
<style lang="less" scoped>
 .darg-item {
    background: var(--td-brand-color-1);
    border-radius: 4px;
    color: var(--td-brand-color-6);
    padding: 8px 12px;
    margin: 10px 10px 0 0;
    cursor: pointer;
    display: inline-block;
}
.darg_label{
  margin-bottom:10px;
}
</style>

小结

提示：需要注意的点就是获取节点时必须是需要拖拽元素的父节点
有不足之处，请多多指教！