vue h5 实现拖拽

目前项目遇到拖拽的功能，记录一下，大概逻辑如下：

1）左侧为分类列表，右侧为数据，根据左侧的列表分类展示右侧的数据；

2）右侧的数据还可以拖动到左侧类型里面，类似于文件夹拖动时的剪切，复制

 

实现：

div为目标元素，当鼠标拖动下面的li 移上去并放开时会触发，并且鼠标样式会发生变化,注意上面的两个方法为必须

li 为移动的元素，deaggable ="true",表示此元素可移动

 // 开始拖拽时执行 通过event.dataTransfer.setData 设置数据
    drag (event, lesson) {
      event.dataTransfer.setData('item', lesson.parentId)
      event.dataTransfer.setData('fileKey', lesson.fileKey)
      this.dragEle = lesson
    },
//停止拖拽删除
    dragend (event) {
      event.dataTransfer.clearData()
    },
//到达目标元素放开鼠标执行的代码，通过 event.dataTransfer.getData可拿到相应的传输数据
    async drop (data, event) {
      let editParentId = parseInt(event.dataTransfer.getData('item')) // 拿到parentId
      this.editFileKey = event.dataTransfer.getData('fileKey')// 拿到fileKey
    }