基于grid布局实现页面元素的动态拖拽替换
一些实际的应用场景中，我们可能需要通过拖拽页面元素来实现动态替换，比如在一个拖拽排序的页面中，用户可以通过拖拽的方式改变列表中不同元素的位置。 本人看见网上的都是基于flex布局的动态拖拽，就想尝试写一下grid布局的拖拽实现一下，于是有了本篇文章，本篇主要都是基于元素实现，文章主要时提供了一个思路，需要时请根据自己的实际需求更改或者封装。
这段代码实现了一个拖拽元素的效果，拖拽的元素被限制在一个九宫格中，每个格子大小为50px*50px。九宫格中已经存在9个元素，每个元素对应一个格子，初始时元素的位置与格子一一对应。可以通过拖拽元素改变元素的位置，当元素拖拽结束后，元素会停留在离其最近的格子中。
代码中用到了一些CSS属性，如 display: grid 表示该元素以网格布局方式展示， grid-template-areas 定义网格布局中的区域， grid-area 定义元素占据的区域。还使用了一些事件监听器和计算函数来实现拖拽元素的效果。
具体的实现思路如下：
-
首先通过构造函数初始化数据，包括拖拽元素的数量、每个元素的宽度和高度、以及拖拽的类型（重排或替换）等。
-
在页面渲染完成后，通过
joinGridArea方法构造 Grid 布局的样式，并将每个拖拽元素添加到对应的位置。 -
当用户按下鼠标左键时，通过
startDrag方法启动拖拽，将当前拖拽元素的 CSS 样式设置为position: relative;并设置其z-index为 100，这使得该元素处于可拖拽的状态。 -
当用户移动鼠标时，通过
doDrag方法获取当前鼠标位置，并计算出拖拽元素的新位置，如果超出了元素可移动的区域，则将位置限制在该区域内。 -
当用户松开鼠标左键时，通过
stopDrag方法结束拖拽，并根据不同的拖拽类型进行相应的处理。如果拖拽类型是重排，则交换当前拖拽元素和目标元素的位置；如果是替换，则直接将当前拖拽元素替换目标元素。 -
getRangeOfEl方法用于计算当前元素可移动的区域。该方法首先获取当前元素在 Grid 布局中的位置，然后根据可移动的列数和行数计算出当前元素可移动的范围，最后返回该范围的最大值和最小值。 以下是代码中用到的属性的解释：
offset.x和offset.y: 用于记录鼠标按下时的位置坐标，计算元素拖拽过程中鼠标的偏移量。isDragging: 用于记录鼠标是否正在拖拽。column: 定义九宫格的列数。columnWidth: 定义每个格子的宽度。dataArray: 存储九宫格中元素的信息，包括每个元素的标签和值。dataCloneArray:dataArray的深度克隆，用于记录每个元素原始的位置信息。type: 拖拽类型，包括重排（resort）和替换（replace）两种。
