js拖动排序核心代码

JS代码:

var arrTools = {
    //quick sort for result array
    liEleSort: function (arr) {
        //if array<=1,return
        if (arr.length <= 1) { return arr; }
        var pivotIndex = Math.floor(arr.length / 2);
        //find creteria and delete it from original array
        var pivot = arr.splice(pivotIndex, 1)[0];
        //define left and right array
        var left = [];
        var right = [];

        //those smaller than creteria put into left.otherwise put into right
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].index <= pivot.index) {
                left.push(arr[i]);
            }
            else {
                right.push(arr[i]);
            }
        }
        //recicle
        return arrTools.liEleSort(left).concat([pivot], arrTools.liEleSort(right));
    },

    //transfer array-like to array
    makeArray: function (obj) {
        return Array.prototype.slice.call(obj, 0);
    }
};



function getLis_By_UlId(id) {
    var oUl = document.getElementById(id);
    if (!oUl) //if null
        return null;
    var aLi = oUl.getElementsByTagName("li");
    return aLi;
}
function setStyle_Cursor(aLi) {
    if (!aLi)
        return;
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].onmousemove = null;
        aLi[i].onmouseup = null;
        aLi[i].onmouseover = null;
        aLi[i].style.cursor = "pointer";
    }
}
function getStyle(obj, attr) {//解决JS兼容问题获取正确的属性值
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function startMove(obj, json, fun,tar) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var isStop = true;
        for (var attr in json) {
            var iCur = 0;
            //判断运动的是不是透明度值
            if (attr == "opacity") {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                iCur = parseInt(getStyle(obj, attr));
            }
            var ispeed = (json[attr] - iCur) / 8;
            //运动速度如果大于0则向下取整，如果小于0想上取整；
            ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
            //判断所有运动是否全部完成
            if (iCur != json[attr]) {
                isStop = false;
            }
            //运动开始
            if (attr == "opacity") {
                obj.style.filter = "alpha:(opacity:" + (json[attr] + ispeed) + ")";
                obj.style.opacity = (json[attr] + ispeed) / 100;
            } else {
                obj.style[attr] = iCur + ispeed + "px";
            }
        }
        //判断是否全部完成
        if (isStop) {
            clearInterval(obj.timer);
            arrTools.doneMove_num++;
            if (fun) {
                fun(obj, tar);
            }
        }
    }, 30);
}

function initAli(id) {
    var aLi = getLis_By_UlId(id);
    arrTools.aLi = arrTools.makeArray(aLi);
    arrTools.minZindex = 1;
}

//loading to reorder
function orderLoad() {
    var disX = 0;
    var disY = 0;
    var aPos = [];
    for (var i = 0; i < arrTools.aLi.length; i++) {
        var t = arrTools.aLi[i].offsetTop;
        var l = arrTools.aLi[i].offsetLeft;
        arrTools.aLi[i].style.top = t + "px";
        arrTools.aLi[i].style.left = l + "px";
        aPos[i] = { left: l, top: t };
        arrTools.aLi[i].index = i;
    }
    for (var i = 0; i < arrTools.aLi.length; i++) {
        arrTools.aLi[i].style.position = "absolute";
        arrTools.aLi[i].style.margin = 0;
        setDrag(arrTools.aLi[i]);
    }
    //拖拽
    function setDrag(obj) {
        obj.onmouseover = function () {
            obj.style.cursor = "url('/Image/cursor_move.png'),auto";
        }
        $(obj).bind("mousedown", function (event) {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            obj.style.zIndex = arrTools.minZindex++;
            //当鼠标按下时计算鼠标与拖拽对象的距离
            disX = event.clientX + scrollLeft - obj.offsetLeft;
            disY = event.clientY + scrollTop - obj.offsetTop;
            document.onmousemove = function (event) {
                //当鼠标拖动时计算div的位置
                var l = event.clientX - disX + scrollLeft;
                var t = event.clientY - disY + scrollTop;
                obj.style.left = l + "px";
                obj.style.top = t + "px";
				/*for(var i=0;i<aLi.length;i++){
					aLi[i].className = "";
					if(obj==aLi[i])continue;//如果是自己则跳过自己不加红色虚线
					if(colTest(obj,aLi[i])){
						aLi[i].className = "active";
					}
				}*/
                for (var i = 0; i < arrTools.aLi.length; i++) {
                    arrTools.aLi[i].className = "";
                }
                var oNear = findMin(obj);
                if (oNear) {
                    oNear.className = "active";
                }
            }
            document.onmouseup = function () {
                document.onmousemove = null;//当鼠标弹起时移出移动事件
                document.onmouseup = null;//移出up事件，清空内存
                //检测是否普碰上，在交换位置
                var oNear = findMin(obj);
                if (oNear) {
                    exchangeLocation(oNear, obj);
                } else {

                    startMove(obj, aPos[obj.index]);
                }
            }
            clearInterval(obj.timer);
            return false;//低版本出现禁止符号
        });
    }
    var tempIndex = 0;
    function exchangeLocation(oNear, obj) {
        oNear.className = "";
        arrTools.needMove_num = 1;
        arrTools.doneMove_num = 0;
        tempIndex = oNear.index;
        if (Math.abs(oNear.index - obj.index) <= 1) {
            startMove(oNear, aPos[obj.index], afterMove, obj.index);
            startMove(obj, aPos[oNear.index], afterMove, tempIndex);
            arrTools.needMove_num++;
        } else {
            startMove(obj, aPos[oNear.index], afterMove, tempIndex);
            if (oNear.index < obj.index) {
                for (var i = tempIndex; i < obj.index; i++) {
                    startMove(arrTools.aLi[i], aPos[++tempIndex], afterMove, tempIndex);
                    arrTools.needMove_num++;
                }
            } else {
                for (var i = tempIndex; i > obj.index; i--) {
                    startMove(arrTools.aLi[i], aPos[--tempIndex], afterMove, tempIndex);
                    arrTools.needMove_num++;
                }
            }
        }
        //unbind events by jQuery
        $("#ul_active li").unbind();
        oNear.style.zIndex = arrTools.minZindex++;
        obj.style.zIndex = arrTools.minZindex++;
    }

    function afterMove(li, tar) {
        li.index = tar;
        if (arrTools.doneMove_num == arrTools.needMove_num) {
            arrTools.aLi = arrTools.liEleSort(arrTools.aLi);
            //activate dragging(only status in active)
            arrTools.orderLoad();
        }
    }

    //碰撞检测
    function colTest(obj1, obj2) {
        var t1 = obj1.offsetTop;
        var r1 = obj1.offsetWidth + obj1.offsetLeft;
        var b1 = obj1.offsetHeight + obj1.offsetTop;
        var l1 = obj1.offsetLeft;

        var t2 = obj2.offsetTop;
        var r2 = obj2.offsetWidth + obj2.offsetLeft;
        var b2 = obj2.offsetHeight + obj2.offsetTop;
        var l2 = obj2.offsetLeft;

        if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {
            return false;
        } else {
            return true;
        }
    }
    //勾股定理求距离
    function getDis(obj1, obj2) {
        var a = obj1.offsetLeft - obj2.offsetLeft;
        var b = obj1.offsetTop - obj2.offsetTop;
        return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    }
    //找到距离最近的
    function findMin(obj) {
        var minDis = 999999999;
        var minIndex = -1;
        for (var i = 0; i < arrTools.aLi.length; i++) {
            if (obj == arrTools.aLi[i]) continue;
            if (colTest(obj, arrTools.aLi[i])) {
                var dis = getDis(obj, arrTools.aLi[i]);
                if (dis < minDis) {
                    minDis = dis;
                    minIndex = i;
                }
            }
        }
        if (minIndex == -1) {
            return null;
        } else {
            return arrTools.aLi[minIndex];
        }
    }
}

html代码：

<ul id="#id">
		<li></li>
		<li></li>
		<li></li>
</ul>