最近在尝试写一个 jQuery 的拖拽插件（效果表现为交换，而不是插入），记录一下其中的心得：

1. 当鼠标滑动到可以拖动的元素上时，可以通过加上CSS样式outline:1px solid blue（IE8及以上支持）来高亮，这样与加 border 相比较不会改变原有布局，减少侵入性。
2. 当拖动开始时（mousedown），
   • 记录下此时的鼠标位置XY，比如originX, originY；
   • 隐藏鼠标下的可拖动元素；
   • 克隆鼠标位置下的可拖动元素，并设定其位置为当时可拖动元素的XY，添加到文档流中显示；
3. 在拖动时，如何保持住当前的正在拖动的元素（即拖动元素跟随鼠标移动）?
   • 设定要挪动到的位置的X值为其当前的left值加上当前鼠标的pageX再减去上一次记录下来的originX值。
   • 设定要挪动到的位置的Y值为其当前的top值加上当前鼠标的pageY再减去上一次记录下来的originY值。
   • 更新originX值为当前鼠标的pageX，更新originY值为当前鼠标的pageY。
4. 在拖动的过程中，如何判断着陆点（即可交换的元素）？
   • 先把可拖拽元素的次序(index)和位置（left=offset().left, top=offset().top, right=left+width,bottom=top+height）计算出来，并缓存下来到一个Matrix中。
   • 通过鼠标的位置（event.pageX, event.pageY）来获取到当前拖拽到能着陆的元素，具体方法是通过上一步的Matrix中存放的所有可拖拽元素的上下左右值来判断（判断条件是pageX > left && pageX < right && pageY > top && pageY < bottom）得出其对应的那个元素的index。如果能找着，给该元素加上样式（先清除掉所有元素的这个样式以清除上一次的结果）以显示可以着陆。如果没有找到，清除所有元素的这个样式以清除上一次的结果。
5. 交换
   • 新建一个临时的DOM节点 $tmp；
   • 将 $tmp 插入到要拖动的元素 $dragTarget 后面；
   • 把 $dragTarget 挪动到着陆点上的元素 $dropTarget 后面；
   • 将 $dropTarget 挪动到 $tmp 之后。
   • 删除掉临时节点 $tmp。

总结

在实际项目中，还是建议使用已有的开源jQuery拖拽插件来做这些事情。毕竟自己来写太费时间，仅用于学习之用。