一.实现的功能
1、拖动表单元素插入，从右向左拖动表单区域
2、拖动表单元素&； 拖放后，从左侧表单区域拖到右侧区域将被删除
3、拖动交换位置，可以上下拖动左侧窗体元素交换位置
1、ondragstart的情况下，首先拖动时要区分是插入还是拖动来改变顺序。 (因为绑定了相同的函数)，所以插入后记住flag为1，重新排序后记住flag为2，记录拖动中的元素即可完成准备
2、ondragover会显示一条线条，告知用户正在拖动的表单元素将位于何处，需要进行计算
这个黑色的是浏览器页面，白色的是表单元素调用getBoundingClientRect ()获取的最小覆盖矩形区域，他返回对象。 其中，top表示白色部分的距离(顶部边界到浏览器顶部的距离)，bottom表示黄色线条的距离。 可以获取浏览器页面上的鼠标坐标，并确定鼠标位于哪个表单元素中。 然后，把这个元素分成两半，在粉红色的上面部分，在上面的边界标记蓝色，否则在下面部分标记蓝色。
3、在ondrop中，根据上一步判断的位置，放置拖动的元素，添加新的可以克隆后插入，替换的可以直接插入。
其实原理很相似。 但是，您只需要删除ondrop绑定的函数中正在拖动的元素。 代码中有很多注释，这里不做说明。
3、代码https://github.com/wlmnzf/JavaScript-train/tree/master/custom form