js可拖動列表實現代碼_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:01:43

js可拖動列表實現代碼_javascript技巧

js可拖動列表實現代碼_javascript技巧:補充一點：要禁止移動中選中文字，FF可以設置CSS xxxx{-moz-user-select:none;} 其他的瀏覽器可以設置 XXXX.onselectstart = function(){return false} 一種實現原理就是點擊沒目標元素之后，創建一個占位元素（或者復制一份目標元素，即拷貝B），然后拖動

推薦度：

點擊下載本文 文檔為doc格式

導讀js可拖動列表實現代碼_javascript技巧:補充一點：要禁止移動中選中文字，FF可以設置CSS xxxx{-moz-user-select:none;} 其他的瀏覽器可以設置 XXXX.onselectstart = function(){return false} 一種實現原理就是點擊沒目標元素之后，創建一個占位元素（或者復制一份目標元素，即拷貝B），然后拖動

補充一點：
要禁止移動中選中文字，FF可以設置CSS
xxxx{-moz-user-select:none;}
其他的瀏覽器可以設置
XXXX.onselectstart = function(){return false}
一種實現原理就是點擊沒目標元素之后，創建一個占位元素（或者復制一份目標元素，即拷貝B），然后拖動目標元素（或者復制的來的新元素B）；
找到相應的位置之后，插入目標元素。清除占位元素或者B。
比如有一個列表：
代碼如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

第一條

第二條

第三條

第四條

第五條

第六條

第七條

第八條

點擊“

第一條

”（記為元素A），獲取““

第一條

””的位置和尺寸信息，把元素A拷貝一遍（記為元素B），然后插入文檔中，將元素B絕對定位到元素A的位置，然后鼠標移動的時候，元素B跟著拖動，接著就是判斷插入點。
判斷插入點就是判斷當前鼠標所在的坐標，如果鼠標坐標落在除了元素A之外的其他LI元素范圍之內，就滿足可插入的條件，同時上半部分就插入到前面，下半部分就插入到后面。（=。= 個人口味重，覺得這段話好邪惡啊）

為了標示出插入的位置，我們在選中的插入點處另插入一個元素，僅作標桿用。
下面是一個demo：
代碼如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">