JavaScript---九宫格拖拽换位

一.效果展示：

JavaScript九宫格拖拽换位

二.案例分析：

1. 9宫格排列，行列结构。
2. 当页面刷新时，9个格子，每个格子的背景颜色会随机发生变化
3. 任意点击按下某个格子时，鼠标移动，格子会随之移动，并在原来的位置也有相同的格子出现（补上空缺的位置）
4. 当鼠标释放时，距离触发的格子最近的一个格子，会与它发生位置交换。

---

•  创建一个空的div,作为父级元素，设置好样式。
• 通过观察我们会发现，9宫格是3行3列的排列