系列文章
一、實(shí)現(xiàn)的功能
1、拖拽插入表單元素，從右邊拖拽如左邊的表單區(qū)
2、拖拽刪除表單元素，從左邊的表單區(qū)拖到右邊的區(qū)域就會(huì)刪除
3、拖拽交換位置，左邊的表單元素上下拖拽可以交換位置
1、在ondragstart的時(shí)候先區(qū)分是要拖拽請(qǐng)插入還是拖拽改變順序（因?yàn)榻壎ǖ氖峭粋€(gè)函數(shù)），插入記flag為1，改變順序記flag為2，然后把正在拖拽的元素記錄下來(lái)就算完成準(zhǔn)備工作了
2、在ondragover中，因?yàn)橐@示一根線來(lái)提示用戶這個(gè)正在拖拽的表單元素會(huì)被放在哪里，因此就需要計(jì)算
這個(gè)黑色的就是瀏覽器頁(yè)面，白色的是表單元素調(diào)用getBoundingClientRect()獲取的最小覆蓋矩形區(qū)，他會(huì)返回一個(gè)對(duì)象，其中top表示白色部分的距離（上邊界到瀏覽器頂部的距離），bottom表示黃色線 距離。我們可以獲取鼠標(biāo)在瀏覽器頁(yè)面上的坐標(biāo)，然后判斷鼠標(biāo)正在哪個(gè)表單元素里。然后再對(duì)這個(gè)元素對(duì)半分，在粉色上面部分，則對(duì)其上邊界標(biāo)記為藍(lán)色，否則就是下部分標(biāo)記為藍(lán)色。
3、ondrop中，根據(jù)上一步判斷的位置，放置拖拽的元素，如果是新增，則克隆一份，再插入，是替換的話則直接插進(jìn)去就可以了。
其實(shí)原理差不多，只不過(guò)在ondrop中綁定的函數(shù)中，是把正在拖拽的那個(gè)元素刪掉就可以了。代碼中有很多注釋?zhuān)@里就不一一講解了。
3、代碼
https://github.com/wlmnzf/javascript-train/tree/master/customForm
