draggable-vue-拖拽课程表

 

 key：dragstart、drop的事件监听方法实现 ；

 可拖拽元素绑定dragstart方法，一定要设置draggable=true才能实现拖拽效果；

<div :draggable="true" @dragstart="dragStart($event)"></div>

    let dragEl = '' //被拖拽的元素
    function dragStart(e) {
      dragEl = e.target
    }

放置目标元素绑定drop方法，并在dragover中阻止默认不允许drop的行为

替换课程时，target注意要取到drop的元素，而不是上一个拖拽进去的元素，编写一个方法去寻找符合条件的el（条件自定义，这里是查找dataset）

<td @dragover.prevent @drop="drop($event)" data-canDropType="copy"></td>

    function drop(e) {
      let aimEl = getDropNode(e.target)
      aimEl.innerHTML = ''
      let cloneNode = dragEl.cloneNode(true)
      cloneNode.draggable = false
      aimEl.append(cloneNode)
    }

    function getDropNode(node) {
      while (node) {
        if (node.dataset.candroptype) {
          return node
        }
        node = node.parentNode
      }
    }