好家伙,

本篇我们来说说，编辑器内如何实现拖拽

完整代码已开源

https://github.com/Fattiger4399/ph-questionnaire.git

0.效果预览

1.思路

1.1.视图操作分析

这一块是这一章节最核心的部分

到

用户进行了什么操作？

（1）点击编辑器中第一个组件

（2）松开

（3）在setter中修改第一个组件的数据

（4）按下第一个组件（不松开鼠标左键）

（5）拖拽（不松开鼠标左键）

（6）到达目标地点（松开鼠标左键）

上述操作中，只有第六个是需要我们进行分析的

但其实也非常简单，

图片中画红框的区域如何确定呢？

目标区域的位置 小于 第四个组件的开始坐标 加上 一半的第四个组件的高度

并且

目标区域的位置 大于  第四个组件的开始坐标 减去 一半的第三个组件的高度

换成公式大概长这个样子

放到四个后面。。。放到第五个后面。。。

后面的情况以此类推

好了

1.2.数据操作分析

编辑器本身就是按数据的顺序渲染的，所以，只要排好序，然后更新渲染器就可以了

2.开始操作

我们需要用到的一些坐标

事件对象e的一些属性

• isTrusted : 表示事件是否是由用户操作触发的，如果是由脚本创建的事件，则为 false ，如果是由用户操作触发的则为 true 。
• altKey , ctrlKey , metaKey , shiftKey : 分别表示是否按下了 Alt、Ctrl、Meta、Shift 键。
• bubbles : 表示该事件是否会冒泡。
• button : 表示按下的是哪个鼠标按钮（左键为 0，中键为 1，右键为 2）。
• clientX , clientY : 表示鼠标指针在视口中的坐标。
• pageX , pageY : 表示鼠标指针相对于页面的坐标。
• screenX , screenY : 表示鼠标指针相对于屏幕的坐标。
• target : 表示事件的目标元素。
• type : 表示事件的类型，这里是 "dragend"。
• timeStamp : 表示事件发生的时间戳。
• x , y : 与 clientX , clientY 相同，表示鼠标指针在视口中的坐标。
• offsetX : 表示鼠标指针位置相对于触发事件的对象的 X 坐标。换句话说，它是鼠标指针距离事件目标元素的左侧边缘的像素距离。
• offsetY : 表示鼠标指针位置相对于触发事件的对象的 Y 坐标。它是鼠标指针距离事件目标元素的顶部边缘的像素距离。

3.代码分析

（以下仅分析关键代码，完整代码请参考）

1. 首先，根据传入的 config 对象，更新选中的样式，将选中的组件标记为 config.dsl 。

2. 然后，通过获取编辑器元素和选中组件的类名，找到所有符合条件的子元素并保存在 childElements 中。

3. 根据选中组件的 wid 属性计算出 sameid ，用于定位对应的子元素。

4. 通过筛选出以 ph- 开头的 div 元素，计算出这些元素的 offsetTop 和 offsetHeight ，并保存在 phoffsetTopbox 和 phoffsetHeightbox 数组中。

5. 定义了两个事件处理函数 dragStartHandler 和 dragEndHandler ，分别处理拖拽开始和拖拽结束的逻辑。

6. 在拖拽结束时，根据鼠标在 Y 轴上的位置，判断拖拽的方向（向上或向下），并根据计算得到的位置信息，将选中的组件插入到新的位置上。

7. 移除旧的事件监听器，添加新的事件监听器，并设置元素为可拖拽状态。