vue 拖拽排序 draggable

 Sortable.js 的 vue 组件

安装

npm i -S vuedraggable

页面 js：

import draggable from "vuedraggable"

components: {
     draggable
  },

页面 html ：

  
              <draggable
                class="syllable_ul"
                style="padding-left: 0; margin: 0"
                element="ul"
                :list="memberList"    // 需要拖拽的循环列表 其实就是v-for的那个
                :options="{ group: 'title', animation: 150 }"
                :no-transition-on-drag="true"
                @change="changes"
                @start="begin"
                @end="end"
                :move="transfore"
              >
                <el-form-item
                  label=""
                  prop=""
                  class="dire-people"
                  v-for="(item, index) in memberList"
                  :key="index"
                >
                  <p style="cursor: pointer">
                    {{ item.userName }} {{ item.userTel }}
                  </p>
                </el-form-item>
              </draggable>

 嵌套了 element-ui 的表单 el-form-item  

方法：

   //evt里面有两个值，一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
    changes(evt) {
      console.log(evt);
    },
    begin(evt) {
       console.log(evt);
    },
    end(evt) {
      console.log(evt);
      evt.item; //可以知道拖动的本身
      evt.to; // 可以知道拖动的目标列表
      evt.from; // 可以知道之前的列表
      evt.oldIndex; // 可以知道拖动前的位置
      evt.newIndex; // 可以知道拖动后的位置
    },
    transfore(evt, originalEvent) {
      console.log(evt);
      console.log(originalEvent); //鼠标位置
    },

有例子中还有<transition-group>   我没有用到   官方给的例子  https://david-desmaisons.github.io/draggable-example/  中有  有需要的 可以去看看

github地址：https://github.com/SortableJS/Vue.Draggable

更详细的 vue.draggable 中文文档：http://www.itxst.com/vue-draggable/tutorial.html