vue项目中dom拖动排序功能实现

vue项目中拖动元素改变其顺序的功能实现

在这里插入图片描述
实现此功能，我利用的是SortableJs,其官网上直接介绍其为功能强大的js拖拽库，只需要简单的代码即可实现dom拖拽

1.下载

npm i sortablejs

在这里插入图片描述

2.引入

使用时，我们在那个页面中使用，就在该vue文件中引入即可

<script>
import Sortable from 'sortablejs'
</script>

3.使用

首先，参考官网中的案例和配置项
在这里插入图片描述

使用sortablejs需要new一个示例出来，初始化实例时，第一个参数是一个dom，是拖拽列表元素的容器，第二个参数是传入的配置对象，可以在配置对象中写入配置项来实现各种不同的功能效果

上述我们知道要操作dom, 因此初始化的代码我写在了一个方法中，并在mounted生命周期回调中调用该方法

首图展示的效果代码如下：

<template><div><div id="example1"><div class="list-group-item" v-for="i in 10" :key="i"><el-button class="move" icon="Discount" type="primary" size="small" plain circle></el-button>Item{{i}}</div></div></div>
</template>
<script>
import Sortable from 'sortablejs'
export default {data(){return {sortableObj:null}},mounted(){this.rowDrop()},methods:{rowDrop(){if(this.sortableObj){this.sortableObj.destroy()}this.sortableObj=new Sortable(document.getElementById('example1'),{animation:150,//官网中配置项的注释已经非常详细了，这里我就不一一注释啦handle:'.move',ghostClass:'blue-background-class'})}}
}
</script>
<style lang="scss">
.list-group-item{padding: 12px 20px;border: 1px solid rgba(0,0,0,.125);
}
.blue-background-class{background-color: #c8ebfb;
}</style>