一. 安装依赖包

npm i -S vuedraggable

二. 使用

import draggable from 'vuedraggable'

三. 在Html中使用方式
 

<ul>
        <draggable
          :list="sourceList"
          tag="div"
          animation="500"
          group="pk"
          @end="datadragEnd"
        >
          <transition-group>
            <li v-for="(item,index) in sourceList" :key="index">

              <!-- 备课包 -->
              <div v-if="item.sourceType === 'pk'">
                <source-type-pk
                  :id="renameId"
                  :item="item"
                  @end="datadragEnd"
                  @rename="renameTick"
                  @delete="clickDelete"
                  @uploding="clickUpLoading"
                  @add="clickAddLinks"
                  @move="moveTo"
                />
              </div>
              <!-- 资源 -->
              <div v-if="item.sourceType === 'tp' || item.sourceType === 'qs' || item.sourceType === 'se'">
                <source-other-type
                  :id="renameId"
                  :item="item"
                  @rename="renameTick"
                  @delete="clickSingleDelete"
                  @move="moveTo"
                />
              </div>

              <!-- 链接 -->
              <div v-if="item.sourceType === 'lk'">
                <source-type-lk
                  :id="renameId"
                  :item="item"
                  @rename="renameTick"
                  @delete="clickSingleDelete"
                  @move="moveTo"
                />
              </div>

            </li>
          </transition-group>
        </draggable>
      </ul>

四. 顺便记录一下我在end事件中处理的数据

      传给后端的数据类型

{
  "bookId": 0,
  "chapterId": 0,
  "knobbleId": 0,
  "parentSourceForms": [ // 外层
    {
      "child": [ // 若资源包中有数据传，没有传空
        {
          "sourceId": 0,
          "sourceType": ""
        }
      ],
      "sourceId": 0,
      "sourceType": ""
    }
  ],
  "sectionId": 0
}

        下面是我处理的数据（在end事件中可以直接拿到改变后的数据）

datadragEnd() {
      this.parsSourceData(this.sourceList)

       // 数据处理好，课调用接口在这边
      
},

        因为数据处理的代码有点多，所以这边重新定义一个函数

parsSourceData(data) {
      const parentSourceForms = []
      data.forEach(item => {
        if (item.lval.length > 0) {
          item.lval.forEach(lval => {
            parentSourceForms.push({ child: [{ sourceId: lval.sourceId, sourceType: lval.sourceType }], sourceId: item.sourceId, sourceType: item.sourceType })
          })
        } else {
          parentSourceForms.push({ child: [], sourceId: item.sourceId, sourceType: item.sourceType })
        }
      })
      var beforeData = parentSourceForms // 将dataArr赋值给beforeData  也可直接操作dataArr
      const tempArr = []
      const afterData = []// 新数组
      for (let i = 0; i < beforeData.length; i++) {
        if (tempArr.indexOf(beforeData[i].sourceId) === -1) {
          afterData.push({
            sourceId: beforeData[i].sourceId,
            sourceType: beforeData[i].sourceType,
            child: beforeData[i].child
          })
          tempArr.push(beforeData[i].sourceId)
        } else {
          for (let j = 0; j < afterData.length; j++) {
            if (afterData[j].sourceId === beforeData[i].sourceId) {
              const childArr = [... beforeData[i].child]
              afterData[j].child = afterData[j].child.concat(childArr)
              break
            }
          }
        }
      }
      this.parentSourceForms = afterData
    },

五. 实现拖拽的效果

提示：

事件end是在拖拽后得到数据新的排序好的顺序，可在次事件中调用接口和处理数据。因为我的项目是文件的格式，所以文件夹中的内容可以拖出和拖入，这时候就用到draggable中重要的属性group(若是将想要互相拖拽内容，就将group命名一样)
文档：vuedraggable – npm

 可实现的功能：vuedraggable

属性文档：vue.draggable 全部事件列表 – itxst.com