HTML 拖放（Drag and Drop）功能的踩坑总结

一个典型的drag操作是这样开始的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标。
在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如drag 和 dragover 事件类型）

具体的教程看这里：HTML 拖放 API。非常详细！

下面是我个人的踩坑总结

1. 让一个元素被拖动，需要添加 draggable 属性：

   <!-- 只写 draggale 不行，必须写全了： draggable="true" -->
   <section draggable="true"></section>
   

2. 想要让一个元素变成可释放区域，必须在 dragover 中阻止默认事件：

   dropArea.addEventListener("dragover", e => {// 必须阻止默认事件，这里才会变成可释放区域。// 如果不写这一句，那么松手的时候，也不会触发相应的 drop 事件e.preventDefault();
   });
   

3. 鼠标从父元素进入子元素时，会触发父元素的 dragleave