vue项目中draggable实现拖拽排序

本文简要介绍在Vue项目中利用draggable实现拖拽排序的功能，先简单展示下具体功能。

如上图所示，点击【排序】之前list中每个item不能进行排序，当选中【排序】后可以拖拽的方式进行排序。下面就简单介绍些该功能中实现的组件和具体的代码。
draggable是一款非常实用而且功能强大的实现拖拽功能的组件，它有很多不错的公开的属性供使用者设置。想要详细了解的话，可去GitHub中draggable官网查看，这里不多赘述。

---

draggable引入

在windows环境下，首先打开cmd环境，cd到vue项目目录中，执行如下操作。

npm install vuedraggable

然后在vue文件中以如下方式引入

  <script>
  import Vue from 'vue';
  import draggable from 'vuedraggable'
  ...

后面就可以进行开发了，本文demo中.vue组件对应的代码如下所示。

---

代码展示

<template>
  <div class="div_template_list">

    <draggable class="draggable" draggable="false" :list="list2" :move="getdata" @update="datadragEnd"
               :options="{disabled:!modeSort,animation: 300,handle:'.dargDiv'}">