了解一下拖拽事件

整个过程，需要经历以下三个事件：

  // 1. dragstart 拖拽开始
  // 2. dragover 拖拽中
  // 3. drop 放下拖拽的元素

1.拖拽开始【拖拽的元素 img，监听dragstart事件】：

img.addEventListener(“dragstart”, function (e) {
// (1)开始拖拽时，把拖拽元素的数据信息存储起来。
// 存储数据的目的是为了，让容器能够接收到img
// 使用 dataTransfer 进行数据传输
e.dataTransfer.setData(“imgId”, img.id);
console.log(“开始拖拽”);
});

2.拖拽中：

box.addEventListener(“dragover”, function (e) {
// 默认情况下，执行dragover事件时，，不允许进入drop事件中。
e.preventDefault(); //允许放下拖拽的元素
console.log(“拖拽中”);
});

3.拖拽结束：

box.addEventListener(“drop”, function (e) {
console.log(“放下拖拽元素”);
// 获取传递过来的数据（id）
let id = e.dataTransfer.getData(“imgId”);
// console.log(id);
// 根据id获取img标签
let img = document.getElementById(id);
// console.log(img);
// 把img插入到div中
box.appendChild(img);
});
作者：小豪