JS 实现拖拽之 - 九宫格拖拽

九宫格.gif

实现思路和需要掌握的技术：

• 鼠标拖拽模型实现
• li 盒子进行绝对定位
• 批量监听和批量操作 li 盒子
• 判断条件为移动盒子的 top 和 left 在另一个盒子之内。

实战心得：最难得莫过于交换过程中如何更改两个盒子的位置。如果提前知道思路当然很快就能想起来解决方法，但是难就难在你的动动手慢慢实践出来，出来之后记住类似的套路。

每个盒子的 li 的定位采用横着排的求余，竖着排的除。for 循环出现的 i 就是改变位置的关键，让 i 绑定到元素上。这时候就可以给元素一个 index 属性，当需要交换位置的时候就可以专心的交换盒子元素属性值。这也算是闭包的最佳实践应用。