vue拖拽互换位置插件

第一步：安装

npm i vuedraggable -S

第二步：在需要使用的组件中引入

//引入拖拽插件
import vuedraggable from 'vuedraggable';

export default{
    data(){
      return{
        lll:[
            {val:'第一行'},
            {val:'第二行'},
            {val:'第三行'}
        ]
      }  
    },
    components: {
        vuedraggable//注册组件
    },
}

页面中使用：

<!-- vue拖拽插件 -->
<ul>
    <vuedraggable
        v-model="lll"
    >
        <li 
            v-for="(v,i) in lll"
            :key="i"
        >
            {{v.val}}
        </li>
    </vuedraggable>
</ul>
说明：这里这样使用时为了移动ul中的li元素,也可以把ul放在里边，使整块都可以移动，可根据需求自由发挥。