基于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：变化时的回调函数