Ant design vue自定义树（custom版），拖动

 custom部分就是自定义树插槽。无关的v-if，v-show可以清除掉。style也可以清除掉。看的比较明显。

 <a-tree
              :replace-fields="replaceFields"
              v-model="checkedKeys"
              draggable
              @dragenter="onDragEnter"
              @drop="onDrop"
              @dragend="dragend"
              @dragleave="dragleave"
              @dragover="dragover"
              @dragstart="dragstart"
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeystree"
              :tree-data="treeData"
              @expand="onExpands"
              @select="onSelects"
            >
              <template slot="custom" slot-scope="item" @mouseleave="clickShow = false">
                <span :title="`${item.name}  ${item.createdByName}`" @click="Titclick(item)">
                  <a-icon style="margin-right: 4px" v-if="item.type==='c'" slot="switcherIcon" type="folder" />
                  <a-icon style="margin-right: 4px" v-if="item.type==='f'" slot="switcherIcon" type="file" />
                  {{ item.name }}
                </span>
                <span v-show="clickShow&&btnId===item.id">
                  <span v-if="item.canEdit==='1'" @click.stop="Treeedit(item,'编辑目录')" style="margin-right: 5px"><a-icon :type="item.scopedSlots.icon1" /></span>
                  <span v-if="item.canDelete==='1'" @click.stop="Treedelete(item)"><a-icon :type="item.scopedSlots.icon" /></span>
                </span>
              <!-- <span class="but_ipt" v-if="visible">
                <a-input />
              </span> -->
              </template>
            </a-tree>

这边部分为拖动部分

draggable
              @dragenter="onDragEnter"
              @drop="onDrop"
              @dragend="dragend"
              @dragleave="dragleave"
              @dragover="dragover"
              @dragstart="dragstart"

 js部分:

    dragend (e) {
          // console.log(e, 'dragend')
        },
        dragleave (e) {
          // console.log(e, 'dragleave')
        },
        dragover (e) {
          this.form.parent = e.node.dataRef.parent
        },
        dragstart (e) {
          // console.log(e, 'dragstart')
        },
        onDragEnter (info) {
          // console.log(info.expandedKeys, '受控onDragEnter')
          // expandedKeys 需要受控时设置
          // this.expandedKeys = info.expandedKeys
        },
        onDrop (info) {
          const dropKey = info.node.eventKey
          const dragKey = info.dragNode.eventKey
          const dropPos = info.node.pos.split('-')
          const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
          const loop = (data, key, callback) => {
            data.forEach((item, index, arr) => {
              if (item.id === key) {
                return callback(item, index, arr)
              }
              if (item.children) {
                return loop(item.children, key, callback)
              }
            })
          }
          const data = [...this.treeData]

          // Find dragObject
          let dragObj
          console.log(dropKey, dragKey, dropPos, dropPosition, dragObj, 'info')
          loop(data, dragKey, (item, index, arr) => {
            arr.splice(index, 1)
            dragObj = item
          })
          // 判断是否放入文件夹
          if (!info.dropToGap) {
            // Drop on the content
            loop(data, dropKey, item => {
              console.log(data, dropKey, item, 'dropKey')
              item.children = item.children || []
              // where to insert 示例添加到尾部，可以是随意位置
              console.log(dragObj, 'dragObj')
              item.children.push(dragObj)
             // this.form.id = dragObj.id
              //this.form.name = dragObj.name
             // this.form.parent = dropKey
             // this.form.sortNum = 0
             // this.tSzKnowledgeCatalogAPI.API.editTreeMu(this.form).then(res => {
             //   if (res.code === '000') {
             //     this.form = {}
             //     this.addTreeVisible = false
             //     this.loding = false
                  // this.getTree()
             //   }
             // })
            })
          } else if (
            (info.node.children || []).length > 0 && // Has children
            info.node.expanded && // Is expanded
            dropPosition === 1 // On the bottom gap
          ) {
            loop(data, dropKey, item => {
              console.log(dropKey, item, '跨文件夹移动2')
              item.children = item.children || []
              // where to insert 示例添加到尾部，可以是随意位置
              item.children.unshift(dragObj)
            })
          } else {
            let ar
            let i
            // i移动的位置index
            loop(data, dropKey, (item, index, arr) => {
              ar = arr
              i = index
              console.log(dragObj, dropKey, item, i, ar, '移动')
              // this.form.id = dragObj.id
              // this.form.name = dragObj.name
              // this.form.sortNum = i
              // this.tSzKnowledgeCatalogAPI.API.editTreeMu(this.form).then(res => {
              //   if (res.code === '000') {
              //    this.form = {}
              //    this.addTreeVisible = false
              //    this.loding = false
              //    // this.getTree()
              //  }
              // })
            })
            if (dropPosition === -1) {
              ar.splice(i, 0, dragObj)
            } else {
              ar.splice(i + 1, 0, dragObj)
            }
          }
          this.treeData = data
        },

拖放到的文件ID：dropkey，i：当前移动的位置。后台小哥接口有返回parent和parents所以能拿到

拖动的文件:dragObj,拿到跨文件移动的parent：dragover