html5拖放--15行js代码实现两个div内容互换

本文首发于我的个人博客:http://cherryblog.site/ ，欢迎大家前去参观
本文项目地址，sortable插件地址：https://github.com/sunshine940326/sortable
demo地址：https://github.com/sunshine940326/drag

在写我们后台的管理程序中需要有一个拖放的功能，然后我们有一个这样的功能，实现11个固定且大小不一的div互换，效果如下

作为一个小菜鸟，听到这样的消息我是蒙逼的= =，在网上找到一个插件，功能挺强大的

插件地址：https://github.com/sunshine940326/sortable

但是这个插件只能拖动和放置，不能交换，也就是只能将div插入在其他div前面，其余的向后推移，并且不能做到交换div中的内容，而div容器不变的条件，然后我就和其他同事商量了一下交换两个div中的数据要怎么处理，然后同事说这个就比较麻烦了= =。需要写死div，然后先记录鼠标拖动前的div中的内容，然后判断鼠标放下的位置，在哪一个div的范围内，再交换两个的数据= =，真正做起来还不知道有什么坑。听着都怕，于是就暂且搁置了这个功能，直到有一天非做不可了，我百度了一下“怎么交换两个div”，然后找到了一个demo，天啦噜~整个实现过程全部代码50行不到，js代码之后十几行，整个过程不到半个小时就解决了，★,°:.☆(￣▽￣)/$:.°★。撒花！效果如下：

demo地址：https://github.com/sunshine940326/drag
查看代码，发现思路如下:

1. ondragstart