基于vuedraggable实现拖拽排序组件
安装
npm install vuedraggable
引入
import draggable from 'vuedraggable'
使用
<template>
<section id="home">
<article class="container">
<div class="middle">
<draggable v-model="middleContent" handle=".handle" :move="getdata" @update="datadragEnd">
<div v-for="element in middleContent" :index="element.id" :key="element.id" >
<todo v-if="element.name==='todo'" ref="todo"></todo>
<dataplan v-else-if="element.name==='dataplan'" ref="dataplan"></dataplan>
<div v-else-if="element.name==='echartsComAndLeaderLinks'" >
<echartsCom ref="echartsCom" ></echartsCom>
<leaderLinks ref="leaderLinks"></leaderLinks>
</div>
</div>
</draggable>
</div>
</article>
</section>
</template>
<script>
import navigation from "./components/navigation"
import todo from './components/todo'
import dataplan from "./components/dataplan";
import echartsCom from "./components/echartsCom";
import leaderLinks from "./components/leaderLinks";
import draggable from 'vuedraggable';
export default {
name: "home",
components: {
leaderLinks: leaderLinks,
echartsCom: echartsCom,
dataplan: dataplan,
navigation: navigation,
todo: todo,
draggable: draggable,
},
data(){
return{
middleContent: [{id:1,name:"todo"},{id:2,name:"dataplan"},{id:3,name:"echartsComAndLeaderLinks"}],
}
},
methods: {
getdata (evt) {
console.log(evt.draggedContext)
},
datadragEnd (evt) {
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.middleContent)
},
},
}
</script>
首先将需要拖拽功能的部分添加到draggable组件下,然后设置各个我们需要的属性。
- v-model:通过v-model属性绑定数组middleContent,这里通常是其内部for循环的数组,我这里通过数组去用v-if判断是否显示某个组件。
- handle:通过handle属性选择可以进行拖拽的部分,比如我需要的就是标题栏,那么我就将我所绑定的类名“.handle”添加到各个组件的标题栏部分,从而达到拖拽标题栏进行移动的目的。
- move:拖拽时的回调函数
- update:变化时的回调函数