元素拖动

--- theme: cyanosis --- ## 写在开头各位友友好吖❗ 清明已过，下个期待的假期就是五一了，小长假即将到来，假期行程已经可以开始规划囖。😉 不过，对于是大小周的小编来说，整个四月都将是单休，瞬间开心减一半。。。近来，小编断断续续抽空看了一部名叫 [国王排名](https://movie.douban.com/subject/34927946/) 动漫，还挺好看的。😁 还把几年不换的微信头像换成了主角的头像，Em......从"蜡笔小新"变成了"波吉王子"。

新头像，新心情，愉悦。😎 回到正题，本章将分享一些关于 `Javascript` 中拖动的内容，探索拖动过程的奥秘。👏 ## 元素拖动刚开始，咱们循序渐进，先来实现一个最简单的功能，让一个元素变成可拖动元素。布局与样式： ```html 元素拖动

橙某人

``` 要让一个元素可拖动，我们需要处理三个事件： - [mousedown](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousedown_event)：按下。 - [mousemove](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousemove_event)：移动。 - [mouseup](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseup_event)：释放。三者都是老演员了，相信每个前端人都识得啦😋，具体详情可以点链接上MDN查阅。具体逻辑过程： ```html ``` [offsetTop](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop)：元素到 `offsetParent` 顶部的距离。 [offsetParent](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetParent)：距离元素最近的一个具有定位的祖宗元素（`relative，absolute，fixed`），若祖宗都不符合条件，`offsetParent` 为 `body`。效果：

大致原理过程：计算鼠标拖动的横向与纵向距离，再结合元素本身的 `offsetTop` 与 `offsetLeft` 信息，就能实现元素的拖动。没几行代码，应该不难哈，都写上详细的注释啦。 > > 上面用 `clientX/Y` 获取鼠标的位置信息，那用 `pageX/Y` 可以不呢❓ > > `clientX`：提供了鼠标指针相对于浏览器视口（即当前可见的页面部分）左上角的水平坐标。不论页面是否滚动，`clientX` 的值都是相对于视口的。 > > `pageX`：提供了鼠标指针相对于整个页面左上角的水平坐标，包括了任何由于滚动而不可见的部分。当你滚动页面时，`pageX` 的值会改变，因为它考虑了滚动的距离。 > > 简而言之，就是要不要考虑滚动条的问题，如果你想要获取鼠标指针相对于整个页面的位置，应该使用 `pageX`。如果你只关心鼠标指针在当前视口内的位置，那么 `clientX` 就足够了。 > > 网上找了个图，可以瞧瞧： >

## 列表拖动简单的整完，咱们开始上点强度💀，这次要做的功能如下：

看着可能稍微有点复杂，但实际还好啦，我们一步一步来完成。一样，先把布局与样式整一下： ```html 列表拖动

第一个元素

第二个元素

第三个元素

第四个元素

第五个元素

``` 接下来，让每个元素变成可拖动元素。 ```html ``` 与前面讲的差不多，熟悉的配方。😗 稍微有一点区别是，将元素变成可拖动的逻辑与前面讲的不太一致了。😓 这里用上了 [getBoundingClientRect](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect) API，其作用是为了优化前面在 `mouseMoveHandler` 函数中，需要不断去记录鼠标上一个位置的繁琐过程。大概二者的区别如下： 1️⃣ 拖动元素的位置 = 拖动元素原本位置 + 拖动距离 2️⃣ 拖动元素的位置 = 根据鼠标最新位置直接计算拖动元素的最新位置 = 鼠标最新位置 - 鼠标在拖动元素上的距离 > 鼠标在拖动元素上的距离： > >

效果如下：

现在每个元素都能拖动了，只是还没有加上交换的逻辑。但，这看着是不是有点奇怪？当拖动一个元素，列表下面的元素就顶上来了，这与咱们一开始看到的效果不太一致吖❗ 这是因为缺少了一个占位元素，当在拖动元素时，需要自动插入一个占位元素，保持列表布局不会变化，拖动交换元素时，也应该是占位元素与其他元素进行交换，拖动结束时，再将占位元素给删除，将位置让给拖动元素。下面，我们来看看如何解决这个占位元素的问题。 ```javascript ``` 加了大概十行代码，都是比较基础的DOM操作。👀 瞧瞧效果：

有那味了。🤡 最后，咱们差一步了，就是根据**拖动方向**进行元素之间的交换。看到"拖动方向"加粗没😯？这是关键点，我们要如何知道拖动元素是往上还是往下呢❓并且交换元素位置的时机如何把握呢❓ 看如下图，假设了中间三个元素的中心点坐标分别如下图。

当我们拖动第三个元素，往上，第三个元素的中心点坐标会不断变化，可能会变成（10,19）、（10,18）、（10,17）、......。当继续往上拖动，第三个元素中心点坐标变成（10,9）时，它的纵坐标比第二个元素中心点纵坐标小了，这个时候就需要交换位置❗ 根据这个原理过程，咱们先来写一个判断拖动方向的函数，如下： ```javascript // 检测拖动元素是否向上拖动 function isAbove(nodeA, nodeB) { const rectA = nodeA.getBoundingClientRect(); const rectB = nodeB.getBoundingClientRect(); // 计算中心点纵坐标 const centerPointA = rectA.top + rectA.height / 2; const centerPointB = rectB.top + rectB.height / 2; return centerPointA < centerPointB; }; ``` 应该很好理解吧？🌟 交换元素的过程，咱们也可以单独写一个函数，如下： ```javascript // 交换两个相邻的元素位置 function swap(nodeA, nodeB) { // 获取父节点，为后续插入提供一个支点 const parentA = nodeA.parentNode; // 获取参照节点 const siblingA = nodeA.nextSibling === nodeB ? nodeA : nodeA.nextSibling; // 将A节点移动到参照节点之前 nodeB.parentNode.insertBefore(nodeA, nodeB); // 将B节点移动到参照节点之前 parentA.insertBefore(nodeB, siblingA); }; ``` 虽然只有短短四行代码，但这个时候就非常考验你的 `Javascript` 基础了。（当然，这种东西你也可以直接问GPT，捡现成的。👻）最后，结合具体逻辑： ```javascript function mouseMoveHandler() { ... // 获取拖动时的上下元素 const prevEle = draggingElement.previousElementSibling; const nextEle = placeholder.nextElementSibling; // 向上移动（没上一个元素了，代表到边界了，不用处理） if (prevEle && isAbove(draggingElement, prevEle)) { // 占位元素要先与拖动元素交换位置❗ swap(placeholder, draggingElement); // 占位元素与上一个元素交换位置 swap(placeholder, prevEle); return; } // 向下移动 if (nextEle && !isAbove(draggingElement, nextEle)) { swap(nextEle, placeholder); swap(nextEle, draggingElement); } } ``` 我们仅需在 `mouseMoveHandler` 函数中添加交换逻辑即可。这里要注意"占位元素要先与拖动元素交换位置"，可能你会有疑问？不是直接交换占位元素与上一个元素（或下一个元素）就行咩？😢 我们可以看看实际的DOM结构，当我拖动第三个元素向上时，第二个元素与占位元素中间还隔着拖动元素呢，注意我们是要交换两个**相邻**的元素，不是随便两个相隔遥远的元素哦。 > 注意，咱们插入占位元素时，是这样子写得： > > `draggingElement.parentNode.insertBefore(placeholder, draggingElement.nextSibling);` > > 这导致占位元素会在拖动元素的下方，这比较符合我们页面的表现，其实占位元素在拖动元素的上方还是下方，都可以，只是这会影响后续的逻辑编写。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cae287819bb74defa85444021d16fe80~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1614&h=506&s=98182&e=png&b=fefefe) 好，到此完毕，列表拖动就完成啦。👻 ## 表格拖动-列接下来要做的是表格上的拖动，也是比较常见的功能了，话不多说，先看效果图：

做之前咱们先来分析一波，由于我们要拖动的是**列**，是竖着纵向排列的，而表格可是按照横向进行布局的❗ 表格的布局结构： ```html

序号	日期	姓名	省份	城市	地址
1	2024-04-01	小小红	广东	广州市	广东省广州市xxxxxx
2	2024-04-02	小小绿	广东	深圳市	广东省深圳市xxxxxx
3	2024-04-03	小小黄	广东	中山市	广东省中山市xxxxx
4	2024-04-04	小小白	广东	佛山市	广东省佛山市xxxx
5	2024-04-05	小小黑	广东	汕头市	广东省汕头市xxxxxx

```

这...可不利于我们拖动处理呀❗我们要拖动的**列**必须是一个整体、是整个块，要是跨元素就麻烦了。 🌟这里咱们就要换个思路了，在要开始拖动时，动态创建一个纵向的列表，列表的每一子项就是表格的**列**，其实就是将表格转成我们上面已经讲过的列表拖动来进行操作；然后隐藏原表格，操作这个新列表，当拖动结束的时候，我们再通过列表的索引信息来交换表格的格子就行啦，是不是手拿把掐。😁（注意是拖动列表的项！！！）那咱们先来看看如何动态创建出这个列表叭。😉 相关 `HTML` 结构就是上面那个表格布局了，没了。相关 `CSS` 样式： ```html ``` 上面列出了所有样式，对照着看看就行，样式不是重点，但是其中值得关注的是动态创建的列表，它的 `border` 是如何变成和表格的一样？因为稍微缺失一个格子的边框，可能就会造成列表和原表格不重合，容易露馅，这点你可以仔细琢磨一下。 ```javascript ``` 很熟悉吧，代码中很多都是前面讲过的了。重点只有 `createList` 函数，它的作用就是创建一个与表格一样的列表，外观是一致的，只是与表格不同的是，它的布局是纵向的，就这么简单，详细的可以瞧瞧代码过程。👻 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86a9f8da8a6f4cdc95c52c5587c256c0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1736&h=461&s=119212&e=png&b=fefefe) 现在列表有了，操作列表的拖动这块咱熟呀，直接整上。仅需改动 `mouseMoveHandler` 函数： ```javascript function mouseMoveHandler(e) { if (!isDraggingStarted) { isDraggingStarted = true; createList(); // 通过索引获取拖动元素 draggingElement = [].slice.call(list.children)[draggingColumnIndex]; draggingElement.classList.add('dragging'); // 继续创建占位元素 placeholder = document.createElement('div'); placeholder.classList.add('placeholder'); draggingElement.parentNode.insertBefore(placeholder, draggingElement.nextSibling); // 因为是flex布局，不用设置高度也可以 placeholder.style.width = draggingElement.offsetWidth + 'px'; } // 和元素拖动的过程一样 draggingElement.style.position = 'absolute'; draggingElement.style.top = (draggingElement.offsetTop + e.clientY - y) + 'px'; draggingElement.style.left = (draggingElement.offsetLeft + e.clientX - x) + 'px'; x = e.clientX; y = e.clientY; // 交换元素，与列表拖动的一样 const prevEle = draggingElement.previousElementSibling; const nextEle = placeholder.nextElementSibling; if (prevEle && isOnLeft(draggingElement, prevEle)) { swap(placeholder, draggingElement); swap(placeholder, prevEle); return; } if (nextEle && isOnLeft(nextEle, draggingElement)) { // 元素换个位置而已，用!取反也是一样的 swap(nextEle, placeholder); swap(nextEle, draggingElement); } } function swap(nodeA, nodeB) { const parentA = nodeA.parentNode; const siblingA = nodeA.nextSibling === nodeB ? nodeA : nodeA.nextSibling; nodeB.parentNode.insertBefore(nodeA, nodeB); parentA.insertBefore(nodeB, siblingA); }; function isOnLeft(nodeA, nodeB) { const rectA = nodeA.getBoundingClientRect(); const rectB = nodeB.getBoundingClientRect(); const centerPointA = rectA.left + rectA.width / 2; const centerPointB = rectB.left + rectB.width / 2; return centerPointA < centerPointB; }; ``` 新增加的 `swap` 与 `isOnLeft` 函数在列表拖动的时候都讲过啦，这里就不多说了。做到这里，你的表格（列表）应该是可以正常拖动了，只是拖动后的效果还能不真正同步到表格中而已，差最后一步，咱也给它加上、加上。😀 咱们仅需要改动 `mouseUpHandler` 函数，在拖动结束的时候将列表子项的索引信息同步回原表格上，然后把列表移除就可以了。具体如下： ```javascript function mouseUpHandler() { // 移除占位元素 placeholder && placeholder.parentNode.removeChild(placeholder); // 恢复拖动元素样式 draggingElement.classList.remove('dragging'); draggingElement.style.removeProperty('top'); draggingElement.style.removeProperty('left'); draggingElement.style.removeProperty('position'); // 获取拖动元素最后的索引 const endColumnIndex = [].slice.call(list.children).indexOf(draggingElement); isDraggingStarted = false; // 移除创建的列表 list.parentNode.removeChild(list); // 将列表的信息同步到原表格中 table.querySelectorAll('tr').forEach(row => { // 获取每一行的格子 const cells = [].slice.call(row.querySelectorAll('th, td')); if (draggingColumnIndex > endColumnIndex) { // 往左拖动 // 将目标格子（cells[draggingColumnIndex]）放到最新的位置上 cells[endColumnIndex].parentNode.insertBefore( cells[draggingColumnIndex], cells[endColumnIndex]); }else { // 往右拖动 cells[endColumnIndex].parentNode.insertBefore( cells[draggingColumnIndex], cells[endColumnIndex].nextSibling); } }); // 恢复原表格的展示 table.style.removeProperty('visibility'); document.removeEventListener('mousemove', mouseMoveHandler); document.removeEventListener('mouseup', mouseUpHandler); }; ``` 应该不是很难哈，都写上了详细的注释。好啦，就这么多，到此，咱们就完成了开头看到的表格列拖动的效果了。👻👻👻 ## 表格拖动-行既然讲了表格的**列**拖动了，那么**行**的拖动肯定也是不能落下啦。😁 不过现在我们有了前面的基础，这个不是洒洒水？有手就行？ `HTML` 结构不变。 `CSS` 样式略微调整一下： ```css ... .list { /* border-left: 1px solid #ccc; */ border-top: 1px solid #ccc; /* display: flex; */ } .list__table th, .list__table td { border: 1px solid #ccc; /* border-left: none; */ border-top: none; box-sizing: border-box; padding: 10px; text-align: center; color: red; } ... ``` 主要还是 `JS` 逻辑部分： ```javascript ``` 大部分还是与上面讲过的一样，有一些略微差别而已，需要注意方向相关的就可以了。还有就是动态创建的列表变成如下的样子了： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ba5223be2ea4e90aed1742dbf1c84c1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1729&h=387&s=103791&e=png&b=fefefe) 最后，放个效果图：

> 最后，再说一个问题，为什么"行"拖动的时候，咱们为什么不直接移动原表格本身的行（`tr`）呢❓还要再创建一个动态表格来移动呢❓ > >

## 完整源码 [传送门](https://gitee.com/ydydydq/dragging) 👈👈👈
***

至此，本篇文章就写完啦，撒花撒花。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2198fba2b674f1b935a63e4abb3cbd7~tplv-k3u1fbpfcp-watermark.image#?w=90\&h=90\&s=8866\&e=png\&b=fcfcfc) 希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。