本文实例讲述了JavaScript实现可拖拽的拖动层Div。分享给大家供大家参考。具体如下:
这是一个完美的JS拖拽效果,带拖尾的JavaScript拖动层代码,经过了多次优化修正,复制节点的方法不错,值得JS爱好者学习,同时代码修正了给拖拽元素加ondblclick事件无效的问题,兼容多种浏览器,拷贝代码即可运行使用。
运行效果如下图所示:
具体代码如下:
-- -------------------- ---- ------- --------- ---- ------ ------------ ----- --- ----------------- ---------------------------------------------------------- ----- ------------------------------------- ------ ----- ------------------------- ------------------- -------------- -- -------------------- ------ ---------------- -- --------- ----------- ----- ------------ ------------- ----------------------------- ---------- ----------------- -------- ------- ------ ---- ------------ ------ ------- ----------------------- --- --- - ---------------------------------------- --- ------ - -- ---------- -------------- - ---------- - ------------ -- -------- ----------- - --- ---- - ---- - -- ----------------- - --------------- - --- ----- - ----- -- ------------- ---- - ------------- - ---------------- ---- - ------------- - --------------- --- ----- - --------------------- --------------------------------- -------------------- - --------------- - --- ----- - ----- -- ------------- --- -- - ------------- - ----- --- -- - ------------- - ----- --- ---- - ------------------------------------ - ------------------ --- ---- - ------------------------------------- - ------------------- -- -- - -- --- - --- -- -- - -- --- - --- -- -- ---- -- --- - ------ -- -- ---- -- --- - ------ ------------------ - --------- ------------------- - ------ ------------------ - -------------------- ---------------- - -- - ----- --------------- - -- - ----- ------ ------ -- ------------------ - ---------- - -------------------- - ----- ------------------ - ----- ------------------- - -------------------- --- --- - - ----- ----------------- ---- --------------- -- ------------------ - ------------------- --------------- ---- ---- ---------- - --------------------------------- --- -------------------- -- ---------------------- -- --------------- -- ------------------ ------ ----- - - -------- ------------- ------- ----- -------- - --- ---- - ------ --- -- -------- - ------ - ---- --- ------ - ----------------- - ------------------ ----------------------------- ------ --- ---------- - ----- --- ---- - -- ------- - ----------- - --- - - -- -- -- -- ------ -- - -- ------ - --- ---- - -------------------- --- ---- - -------------------- --- ------- - -- --- - --- -- -------------- - --- ----- - ----- --- ------ - ---- -- ---- - ----- - ----- - ----- - ------ --- ----- - ------ - ---- - ---- --- ---- - -- --- ---- - ---------------------- - ------------- - ----- - ----- ----- - ---- -- ---- - ----- - ------ ----- - ------ ---- -- ---- -- ----- -- ----- - ------------- - ---- - ----- -------------------- -- ------------ - ---------- ---------- - ------ - - -- ----- - - ----- - - --------- ------- -------
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/3837