draggable-vue-拖拽课程表

原创已于 2023-09-23 19:28:21 修改 · 339 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #javascript

于 2023-09-23 18:31:17 首次发布

本文介绍了如何在HTML中实现拖拽功能，包括设置元素的draggable属性，监听dragstart和drop事件，以及在drop过程中处理克隆节点和目标元素的选择。着重讲解了dragstart事件的绑定和drop事件中找到合适目标元素的方法。

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
      }
    }