一个适应于移动端和PC端的拖动插件

最近要实现一个列表拖动功能，搜了很多最后用了Sortable.js
安装

$ npm install sortablejs --save

引入

import Sortable from 'sortablejs'

核心js（最好写在mounted里面）

       var editBox = document.getElementById('groupBox')//获取大的拖动容器!
        Sortable.create(editBox,{
            handle: ".sortItem",//拖动手柄，css选择器的字符串,在列表中只有触摸相应含有class的dom才能触发拖动事件
            // filter:'',//禁止拖动的列表,定义哪些列表单元不能进行拖放, css选择器的字符串 可以定义多个以','隔开
            // draggable:'',//定义哪些列表单元可以进行拖放,, css选择器的字符串
            // ghostClass:'.item',//定义影子的样式, css选择器的字符串
            // chosenClass:'',//选中状态的样式，css选择器的字符串
            //forceFallback:true,//将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等
            //fallbackClass:true,//拖放过程中鼠标附着单元的样式
            //scroll：true, //当排序的容器是个可滚动的区域，拖放可以引起区域滚动
            animation: 150,//排序过程中的动画
            // sort:true,//boolean 是否在容器内能拖动
            // delay:100,//鼠标或者点击几秒（长按）才能触发
            // disabled:true,//sortable开关 禁用还是启用
            onUpdate: (evt)=>{
               //1
                console.log(evt.oldIndex+"=>"+evt.newIndex)//新旧的index
                
               var menus = [];
                let ali = evt.to.querySelectorAll(".sortItem");
                for(var i=0;i<ali.length;i++){
                    menus.push( ali[i].getAttribute("data-id"))
                }
                console.log(menus)
                console.log(menus[evt.oldIndex],menus[evt.newIndex])//新旧id 这里面新旧相反
     
       }
        });

html

<div  id="groupBox" > 
        <div class="item"   v-for="(item,index) in groups" :key="index">
            <div>{{item.name}}</div>
            <div class="iconfont icon-paixu sortItem" :data-id="item.id"  style="font-size:.30rem;color:#999;"></div>
        </div>
    </div>

最终效果

希望能够帮助大家