Html5课程之拖拽经验心得分享

这次给大家讲一下在Html5中拖拽应用的一些经验心得，希望可以帮到帮到依然为拖拽问题花心思的童鞋们。好了，下面让我们开启本次的Html5课程吧。

拖拽有很多方便实现的功能，例如如下几个：

1、拖拽插入表单元素，从右边拖拽如左边的表单区

2、拖拽删除表单元素，从左边的表单区拖到右边的区域就会删除

3、拖拽交换位置，左边的表单元素上下拖拽可以交换位置

看起来是不是很方便呢?下面就为大家讲一下关键部分的实现思路，希望可以帮到同样也在拖拽问题上下功夫的同学们。如果大家还想了解更多有关于Html5课程的相关知识，就来蓝鸥官网的Html5培训课程中看看吧。

2.1拖拽插入

1、在ondragstart的时候先区分是要拖拽请插入还是拖拽改变顺序(因为绑定的是同一个函数)，插入记flag为1，改变顺序记flag为2，然后把正在拖拽的元素记录下来就算完成准备工作了

2、在ondragover中，因为要显示一根线来提示用户这个正在拖拽的表单元素会被放在哪里，因此就需要计算

这个黑色的就是浏览器页面，白色的是表单元素调用getBoundingClientRect()获取的最小覆盖矩形区，他会返回一个对象，其中top表示白色部分的距离(上边界到浏览器顶部的距离)，bottom表示黄色线距离。我们可以获取鼠标在浏览器页面上的坐标，然后判断鼠标正在哪个表单元素里。然后再对这个元素对半分，在粉色上面部分，则对其上边界标记为蓝色，否则就是下部分标记为蓝色。

3、ondrop中，根据上一步判断的位置，放置拖拽的元素，如果是新增，则克隆一份，再插入，是替换的话则直接插进去就可以了。

2.2拖拽删除

其实原理差不多，只不过在ondrop中绑定的函数中，是把正在拖拽的那个元素删掉就可以了。代码中有很多注释，这里就不一一讲解了。