如何用原生JS将九宫格实现拖拽元素位置互换功能？

本文共计2120个文字，预计阅读时间需要9分钟。

使用原生JS编写一个九宫格，实现九个格子可以拖拽互换位置的效果。

参考内容：

+ 效果演示+ 整体思路分析+ 代码实现

效果图：


代码：

九宫格拖拽互换位置 .grid-container { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; } .grid-item { width: 100px; height: 100px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; cursor: pointer; } 1 2 3 4 5 6 7 8 9

整体思路分析：

1. 使用CSS grid布局创建九宫格。

2.为每个格子添加mousedown、mousemove和mouseup事件监听器。

3.在mousedown事件中，将当前点击的格子设置为activeItem，并修改其样式使其可拖拽。

4.在mousemove事件中，根据鼠标位置更新activeItem的位置。

5.在mouseup事件中，判断鼠标释放位置是否在另一个格子内，如果是，则交换两个格子的位置和索引。

6.交换完成后，重置activeItem的样式。

代码实现：

以上代码展示了如何使用原生JS实现九宫格拖拽互换位置的效果。