一次完整的拖拽项目总结之（四）逻辑条件

按照需求当拖拽一个标签至当前仅有一个标签的逻辑块时，需要出现’交集/并集’的选择框，如下所示：

首先从前端页面角度来说，弹出层要能在适时进行弹出，定位准确，在鼠标拖拽的位置；等待点击’交集’或者’并集’按钮，当点击弹出层内部时，弹出层不消失，而当点击弹出层以外部分时，弹出层能够消失。
从数据逻辑的角度来说，正常的拖拽是到终点位置附近弹起鼠标即完成数据更新，对于需要弹出逻辑条件的时候，则要阻断数据更新，同时保留当前拖拽的信息，当点击’交集’或者’并集’时，再将记录好的信息完成更新。而如果用户不点击’交集’或’并集’时，则不会更新数据。

前端页面定位

采用绝对定位的页面元素：

<div class="selector" ref='selectorPopup' v-show="showSelector" style="position:absolute; width:82px; height:57px;border:1px solid #d9d9d9;z-index:1;background-color:#FFFFFF;">
  <div @click="updateDragAndDrop(location, dragType, id, title, centerPositionX, centerPositionY, 'and')" style="width:68px;height:20px;