效果
最原始实现 HTML Drag Drop 实现
HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。
个人理解：就是在一个图片堆中，选择一张图片，然后通过拖拽这个动作，将图片放在一个空的盒子里。
判断拖拽： 在 HTML 中，除了图像、链接和选择的文本默认的可拖拽行为之外，其他元素在默认情况下是不可拖拽的。属性"draggable"设置为 "true"，所以这个元素变成可拖拽的。如果该属性被省略或被设置为 "false"，则该元素将不可拖拽，此时拖拽只会选中文本。
设置拖拽图像： 当拖拽发生时，会生成拖拽目标的一个半透明图像（触发"[dragstart]" 事件的元素），并在拖拽过程中跟踪鼠标指针。这个图像是自动创建的，所以你不需要自己创建它。
event.dataTransfer.setDragImage(image, xOffset, yOffset);
这三个参数都是必要的。第一个是图像的引用。xOffset, yOffset是指图像位置相对于鼠标指针位置的偏移量。
放拖拽图像的盒子： 要进行拖拽必须确保拖拽的图片能够有地方放。网页或应用程序的大多数区域都不是放置数据的有效位置。因此，这些事件的默认处理是不允许放置。
如果你想要允许放置，你必须取消 dragenter 和 dragover 事件来阻止默认的处理。你可以在属性定义的事件监听程序返回 false，或者调用事件的 "preventDefault()"方法来实现这一点。在一个独立脚本中的定义的函数里，可能后者更可行。
<div ondragover="return false">
<div ondragover="event.preventDefault()">
自己重新实现效果
主要关键
- mousedown：事件监听，元素的抓取
- mousemove：动态监听，抓取后将图片进行移动
- 拖拽后的图片实现放大效果：transform:scale 进行放大
因为自己知识有限，暂时无法做到原作者的能力，只能先从最原始的HTML拖拽效果学起，适合刚入门。
读书知识来源mdn，自己看完之后整合了一下。
[ MDN ]([HTML 拖放 API - Web API 接口参考 | MDN (mozilla.org)](https:
