在專案中遇到了拖放的需求，之前雖然了解過，但是時間久了就忘記的差不多了。前些天進行簡單實現和封裝了一下，自己測試沒有發現大問題，有個小問題就是拖放到的位置是以鬆開滑鼠時指標的位置來判斷插入位置，所以可能效果不甚完美，後面會繼續優化。
自己封裝的js放在了github，歡迎提issues：鏈結。— 2019.6.10更新：解決複雜dom結構的判斷
html結構示例
class
="abs"
>
class
="drop-div"
>
"1-1"
>
>
1-1div
>
>
1p>
li>
"1-2"
>
>
1-2div
>
>
2p>
li>
>
>
1-3div
>
>
3p>
li>
>
>
1-4div
>
>
4p>
li>
ul>
class
="drop-div"
>
>
>
2-1div
>
>
2-1p
>
li>
>
>
2-2div
>
>
2-2p
>
li>
ul>
class
="drop-div"
>
>
>
3-1div
>
>
3-1p
>
li>
>
>
3-2div
>
>
3-2p
>
li>
>
>
3-3div
>
>
3-3p
>
li>
ul>
div>
;
(function
(global, fn, plugin)
)(window,
function()
) p.
addeventlistener
('drop'
, _core.dropparent)
;// 放入到父級
p.addeventlistener
('dragover'
, _core.dropover)
;// 拖動到父級})
;}, drag:
function
(e),
drop:
function
(e)else}if
(!bool)
copydropelem = copyparentelem;
copyparentelem = copyparentelem.parentnode;
copydragelem = dragelem;
}var movey = e.pagey;
// 放入時的位置
var elemy = dropelem.
getboundingclientrect()
.top;
// 放入到元素的位置
var elemycenter = dropelem.
getboundingclientrect()
.height;
// 放入到元素的y軸中心點
// 判斷放入位置，是在放入元素中心靠上，還是靠下，進行區分放入到前面還是後面
if(movey < elemy + elemycenter /2)
parentelem.
insertbefore
(dragelem, parentelem.childnodes[dragindex]);
}else
parentelem.
insertbefore
(dragelem, parentelem.childnodes[dragindex +1]
);}}
, dropparent:
function
(e) e.target.
(dropelem);}
, dropover:
function
(e),
// 獲取相對於父級元素的位置
getindex:
function
(parent, child)}}
return index;},
getdropelem:
function
(elem)
else}}
};return};
},'udrag'
);
udrag.
init
('.drop-div li'
,function
(dragelem, droptoelem, type)
,true
);
HTML5學習之 HTML 5 拖放
拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖放是標準的一部分，任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...
HTML5實現拖放
拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖放是標準的一部分，任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...
HTML5 原聲拖放
最早在網頁中引入js拖放功能的是ie4，並且只可以拖放影象和某些文字。ie5.5以後網頁中的任何元素都可以進行拖放。html5以ie為例項制定了拖放規範。firefox3.5 safari3 和chrome也根據html5規範實現了原聲拖放功能。拖動某元素時，將依次觸發下列事件 1 dragstar...