HTML关于拖放的Js事件所完成的拖放效果（MDN官方示例详解）

一  效果图展示与粗略讲解

（示例原文：HTMLElement：drag 事件 - Web API 接口参考 | MDN）

        先上一波效果图，图中可以看出把带“有白色背景的div元素”进行了拖动，且拖动过程中如果鼠标指针不在“下方紫色区域”范围内，鼠标的光标状态为“禁用”。

        在“下方紫色区域”范围内，光标即为正常状态的原因是此范围的div元素添加了dragover事件，没有添加此事件的范围均为光标“禁用”状态

二  如何实现上方的效果（示例图中颜色变化未实现，对整个拖拽事件来说不主要）  

        说完了上面效果图的的特点，具体来说怎么实现，HTML5规范了一个元素属性draggable，除图片与链接元素以外，此属性在任何元素上默认都为false。但是如果要实现拖动效果，这个属性是必不可少的。先上代码

  HTML代码部分

  

    这个 div 可以拖动
  

   JS代码部分

let dragged;

const source = document.getElementById("draggable");// 被拖拽的元素
source.addEventListener("drag", (event) => {
  console.log("dragging");
});

source.addEventListener("dragstart", (event) => {
  // 定义一个变量，接收被拖拽的元素
  dragged = event.target;
});
source.addEventListener("dragend", (event) => {
  console.log("dragend");
});

/* events fired on the drop targets */
const target = document.getElementById("droptarget");// 拖拽到的目标元素
target.addEventListener("dragover", (event) => {
  // 阻止默认事件，使drop事件生效 ！！！！必须要阻止
  event.preventDefault();
});//

target.addEventListener("dragenter", (event) => {
  console.log("dragenter");
});
target.addEventListener("dragleave", (event) => {
  console.log("dragleave");
});

target.addEventListener("drop", (event) => {
  // 阻止默认事件 阻止打开某些类似链接的元素，只有阻止默认事件才能够使drop事件生效
  event.preventDefault();
  // 移动被拖拽的元素到目标区域，将此元素从原位置删除，添加到新位置
  if (event.target.classList.contains("dropzone")) {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});

        1. 首先在“需要被拖动的”元素draggable = “true”

        2.给“被拖拽”的元素添加dragstart事件，用来获取被拖拽的元素信息

        3.给“要拖拽到“的目标区域元素”添加dragover事件，将默认事件进行阻止，以便让目标区域元素能够使用drop事件

        4.给“要拖拽到“的目标区域元素”添加drop事件，然后阻止drop事件的默认行为（因为有时目标区域是一个可以点击打开的元素），然后将元素从原来的位置删除，在目标区域进行添加。

三  总结

        实现过程中可以发现，最主要的三个方法就是dragstart、dragover、drop事件来完成此拖拽效果，其它api是起到一个更加全面的选项供开发人员去自由选择然后实现设计效果

        阅读完上方的例子再讲解这七个方法的用法就比较容易理解

作用于“被拖拽”的元素

        dragstart：当用户开始拖拽一个元素或选中的文本时触发，早于drag事件的触发，整个拖拽过程仅触发一次

        drag：当拖拽元素或选中的文本时触发，拖拽不放的同时会一直触发此事件

        dragend：当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)，晚于drag事件的触发，整个拖拽过程仅触发一次

作用于“要拖拽到的”的目标区域元素

        dragenter：当拖拽元素或选中的文本到一个可释放目标时触发，进入到目标区域就会触发一次，反复进入就会反复触发

        dragover：当把被拖拽元素拖拽到目标区域元素时触发，拖拽不放的同时会一直触发此事件

        dragleave：当拖拽元素或选中的文本离开一个可释放目标时触发，离开目标区域就会触发一次，反复进入就会反复触发

        drop：当元素或选中的文本在可释放目标上被释放时触发，整个拖拽过程仅触发一次，触发早于dragend事件

结合这七个事件就可以做出拖拽效果以及在拖拽过程中要实现的任意效果啦