H5 drag&drop 写一个拖动定位的demo

概述

完成的效果是，父元素内的单个元素item可以通过拖拽定位。在线地址

ps:目前效果是拖拽目标以及定位目标互换位置，后面一点会做拖拽目标添加到定位目标之前，定位目标之后的元素一次向下移动

实现思路

实现思路是每一个li标签都是一个可以成为拖拽目标的元素，也就是我会触发每一个li标签的dragover以及drop事件，而拖拽的内容我会放到li标签的子元素中，这里我用的a标签。通过dragstart事件setData我需要的属性，也就是拖动目标的index，这里我使用了jq的index()，获得拖动a标签的父元素li在整个ul中的index。然后在drop事件中使用getData获得index，进行后续操作。

运用h5新的api–drag&drop，具体属性阅读这里

具体实现

1. dom结构，dragbox是用来盛放拖动元素的，以及触发drop事件，dragList是需要拖动的元素。
   

2. 绑定dragstart事件。需要注意的是setData中设置存储内容类型为text，name后面的值一定要为string类型，在比较宽容的chorme中不会出现问题，但是在固执傲娇的ie下就GG了。
   

3. 绑定drop和dragover，添加preventDefault的理由是需要阻止默认事件的发生，更具体一点的原因参照其他文章。我解释一下图中的箭头部分。
   
   • 我的目标是，通过ev.target获得当前的dragbox，把拖动目标填充到里面。在通过getData获得拖拽的dragList添加到dragbox中。完成了拖拽dom的移动。
   • 事先保存即将被替换的dragbox中的dragList，然后通过getData获得拖拽目标的父元素，填充。这样就实现了两个dom元素的交换。
   • 所以，这个ev很重要。因为我使用的是ev.target，他会捕获到最底层元素，所以在通过ev.target去获得以上所需的dom元素时，会出现两种情况，ev.target是dragbox以及ev.target是dragList，所以需要像图中那样进行判断。
     

踩坑！

1. 上面说过setData第一个参数的值一定要和第二个参数值得类型是匹配的 。不然在ie下会洗白白。
2. 在替换dom元素是需要对ev.target进行判断，非常不那么完美的地方就是，如果你的子元素非常的多，那至少按照现在的做法，你需要写的if就应该更多。

3. 还有一个大大的bug就是，在chorme下依旧没有问题，但是在ie下存在的就是，设置的dragbox允许拖拽放置框需要有自己的高度，最开始我给.dragbox设置padding，以及用a标签撑起高度，在ie下并不会捕捉到dragbox的dragover，drop事件，所以需要手动的为每一个盒子设置高度。

   兼容性

   兼容性还是不错的chorme，firefox都是没有问题的，safari我没有测试过，ie10，ie11都是没有问题，网上有很多在ie9下有这个api但是需要做其他的兼容才能使用，但是我给box添加了height以后，ie9至少现在是完美支持的。

新增，拖动只改变文本的值

上面一种实现直接替换了dom元素，在实际运用中或许会有更简单的需求比如只替换文本元素，所以新增了这样的代码实现，原理基本一致。代码更加简洁

新增，依次移动效果

元素移动到某个元素上时，不再替换而是在某个元素之前插入。只不过封装的不好。
思路：
+ dragstart事件触发的时候获得所需要的文本值组成一个数组存储，并传递移动的元素的index1
+ drop事件触发获得移动到的index2值，并且在数组中remove移动元素并存储，并插入到index2的位置

总结

这算是我实习一个月以来，自己认真爬的第一坑。drag其实我用了不止一次的，但是第一次这么不草率的去研究了一下他，成就感是有的，但是就是对ie的唾弃感更加强烈了。。