2022-01-31 原生js中拖放事件dragable的介绍和使用

0.概念

拖放事件

拖放源涉及到3个拖放事件。拖动拖放源时，依次触发dragstart、drag和dragend这3个事件

dragstart

按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件。此时光标变成“不能放”符号(圆环中有一条反斜线)，表示不能把元素放到自己上面

drag

触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续触发该事件

dragend

当拖动停止时(无论是把元素放到了有效的放置目标，还是放到了无效的放置目标上)，会触发dragend事件

1.定义

draggable：设置为true，元素就可以拖拽了
拖拽元素事件：事件对象为被拖拽元素

——dragstart,拖拽前触发
——drag,拖拽前、拖拽结束之间，连续触发
——dragend,拖拽结束触发

示例

<div class="box" draggable='true'></div>
<script>
  let box = document.querySelector('.box')
  // 绑定dragstart事件
  box.addEventListener('dragstart', function() {
          console.log('拖拽开始了');
      })
  // 绑定drag事件
  box.addEventListener('drag', function() {
          console.log('元素被拖动');
      })
  // 绑定dragend事件
  box.addEventListener('dragend', function() {
      console.log('拖拽结束');
  })
</script>

参考文章

https://www.cnblogs.com/xiaohuochai/p/5886618.html

注:vue上也有dragable组件