一次完整的拖拽项目总结之（二）拖拽场景

在https://blog.csdn.net/juliotang/article/details/89386319一文中已描述，任何拖拽控件的行为都是mousedown->mousemove->mouseup的结合，在这个过程中，实际上是将对应元素设置为绝对定位在屏幕相应位置上移动，释放后，将元素归位。
这个过程只是实现页面拖拽效果，而实际完成拖拽行为，将元素从一个位置移动到另一个位置，则可能需要记录三个要素：

拖拽元素标识

以本项目为例
dragType：标识被拖拽的是二级标签还是三级标签
id：每个标签的唯一标识（本项目后端只有三级标签有唯一标识，我把每一个二级也给了一个id，默认为它下面第一个三级的id，以便实现前端逻辑）

元素来源位置

从页面结构的角度记录元素起始位置，便于移除该元素

元素去向位置

从页面结构的角度记录元素移动到的位置，便于在该位置添加该元素

结合本例，拖拽场景分为三种：

1. 从上部面板拖拽一个标签到下部

因为上部整个标签是通过标签数组渲染出来的，无需记录元素来源位置，只需要记录拖拽元素标识即可，当从上部拖出时，调用updateDrag方法直接标识相应位置元素为“已拖出”，本例中是以给标签元素加了个draggedOut属性标识。拖拽到下部面板后，通过isLocatedToWhere获取元素去向位置得到被拖拽的位置，在updateDrop方法中更新面板

2. 将标签从下部面板的一个位置移动到另一个位置

下部面板内部的拖动，无需记录拖拽元素标识，通过isLocatedToWhere方法获取元素来源位置，removeFromDrop将该位置的元素删除。通过同样方法isLocatedToWhere方法获取元素去向位置，updateDrop方法中更新面板

3. 从下部面板移除一个或若干标签

不涉及拖拽，点击下部面板相应区域的取消按钮，能够移除一个或若干标签，通过组件中绑定的方法closeFirst、closeSecond、closeThird删除对应元素，再通过updateDragPane遍历标签状态更新上部面板区域，置回被移除的标签