自己常試寫了一個可拖拽進行自定義排序的列表，可能寫的不太好，歡迎提供意見。

我的思路是將列表中的所有項都放進一個包裹層，將該包裹層設為相對定位，每當點擊一個項時，將該項脫離文檔並克隆一份重新添加到文檔末尾並通過設置絕對定位讓它出現在同樣的位置，而原本在它後面的項則會因為它脫離文檔而自動填充空位，當鼠標松開時通過鼠標的位置計算出當前位置處於列表的第幾項，讓後再將克隆項插入到該項之前。

完整代碼：演示

css：

        #main {
            width: 500px;
            margin:0;
            padding
 
: 0;
            background: blue;
            position: relative;
        }
        div.list{
            height: 50px;
            text-align: center;
            margin-top: 3px;
            background: lightblue;
        }
        div.list:first-child{
            margin-top: 0;
        }
        div.drag
 
{　　　　
            position: absolute;
            width: 500px;
            background: red;
            text-align: center;
            height: 50px;
            opacity: 0.5;
        }

樣式部分最外層包層main需要將padding設為0並設為相對定位，如果需要有padding可以在main外面再包一層。

html：

    <div id="main">
        <
 
div class="list">1</div>
        <div class="list">2</div>
        <div class="list">3</div>
        <div class="list">4</div>
        <div class="list">5</div>
    </div>

js：

        var div=g(‘#main‘);  //獲取包裹層元素
        var mTop=div.offsetTop;  //包裹層距離頂端的位置

        var flag=0; //用於控制是否可拖拽
        var drag={    //保存克隆元素的一些信息
            curr: null,
            tTop: 0,
            num: 0
        };

        div.addEventListener(‘mousedown‘,function(e){ //添加mousedown事件
            flag=1; //當鼠標按下時，表示為可拖拽狀態
            var curr=e.target;
            var top=(curr.offsetTop - mTop)+‘px‘; //當前元素相對於父元素的top值

            var y=e.pageY-curr.offsetTop;  //鼠標在當前項中的位置
            drag.tTop=y;  //記錄y值
            console.log(top)
            var newDiv=div.removeChild(curr); //克隆當前項並移除
            newDiv.setAttribute(‘class‘,‘drag‘);  //添加樣式
            newDiv.style.top=top;  //將位置定在當前位置
            newDiv.style.left=0;
            div.appendChild(newDiv);
            drag.curr=curr;
        });
        
        div.addEventListener(‘mousemove‘,function(e){ //利用鼠標移動事件模擬拖拽

            if(!flag){  //如果flag=0則不可拖拽
                return false;
            }else{
                
                var  curr=g(‘.drag‘)[0]; //獲取克隆對象
                curr.style.top=(e.pageY-drag.tTop-mTop)+‘px‘;    //通過鼠標位置改變克隆對象位置

                var ratio = (e.pageY - drag.tTop-mTop)%53;  //每個項的高度是固定的，所以可以通過當前高度除每個項的高度來確定要插入到那個項之前
                if(ratio<=5){ //設置偏差
                    curr.borderTop=‘2px solid green‘; //添加提示
                    drag.num=Math.floor((e.pageY - drag.tTop - mTop)/53);
                    console.log(drag.num)
                }
            }
        });

        div.addEventListener(‘mouseup‘,function(e){ //拖放結束
            div.insertBefore(drag.curr,div.children[drag.num]); //插入
            drag.curr.setAttribute(‘class‘,‘list‘); //添加樣式
            drag.curr.style=null; //清除樣式
            flag=0;
        })
        function g(str){  //用於方便獲取元素對象
            if(/^#.+/.test(str)){
                str=str.slice(1);
                return document.getElementById(str);
            }else if(/^\..+/.test(str)){
                str=str.slice(1);
                return document.getElementsByClassName(str);
            }else {
                return document.getElementsByTagName(str);
            }
        }

Javascript寫的一個可拖拽排序的列表