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

最新推荐文章于 2023-03-04 09:25:16 发布

原创

最新推荐文章于 2023-03-04 09:25:16 发布 · 686 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #拖拽

本文总结了一次拖拽项目中的逻辑条件处理，包括前端页面定位、数据更新逻辑和下部面板中的逻辑条件。在前端，使用绝对定位实现弹出层的精准显示，通过mousedown事件处理点击交互。数据更新逻辑中，当有多个标签时，记录拖拽信息并根据用户选择的'交集'或'并集'决定是否更新数据。下部面板依据数据结构动态渲染逻辑条件，如'交集'、'并集'选项，并在数据结构变化时相应地添加、删除或修改operation属性。

按照需求当拖拽一个标签至当前仅有一个标签的逻辑块时，需要出现’交集/并集’的选择框，如下所示：
在这里插入图片描述
首先从前端页面角度来说，弹出层要能在适时进行弹出，定位准确，在鼠标拖拽的位置；等待点击’交集’或者’并集’按钮，当点击弹出层内部时，弹出层不消失，而当点击弹出层以外部分时，弹出层能够消失。
从数据逻辑的角度来说，正常的拖拽是到终点位置附近弹起鼠标即完成数据更新，对于需要弹出逻辑条件的时候，则要阻断数据更新，同时保留当前拖拽的信息，当点击’交集’或者’并集’时，再将记录好的信息完成更新。而如果用户不点击’交集’或’并集’时，则不会更新数据。

前端页面定位

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

<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;backgrou