分享一款基于js的图片排序效果。鼠标拖动图片，重新排列图片的排列顺序。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

  <ul id="ul1">
        <li>
            <img src="images/1.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/2.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/3.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/4.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/5.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/6.jpg" width="200" height="150" /></li>
    </ul>

css代码：

  *
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #ul1
        {
            width: 660px;
            position: relative;
            margin: 10px auto;
        }
        #ul1 li
        {
            width: 200px;
            height: 150px;
            float: left;
            list-style: none;
            margin: 10px;
        }
        #ul1 li:hover
        {
            border-color: #9a9fa4;
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);
        }
        #ul1 .active
        {
            border: 1px dashed red;
        }

js代码：

  window.onload = function () {
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName("li");
            var disX = 0;
            var disY = 0;
            var minZindex = 1;
            var aPos = [];
            for (var i = 0; i < aLi.length; i++) {
                var t = aLi[i].offsetTop;
                var l = aLi[i].offsetLeft;
                aLi[i].style.top = t + "px";
                aLi[i].style.left = l + "px";
                aPos[i] = { left: l, top: t };
                aLi[i].index = i;
            }
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].style.position = "absolute";
                aLi[i].style.margin = 0;
                setDrag(aLi[i]);
            }
            //拖拽
            function setDrag(obj) {
                obj.onmouseover = function () {
                    obj.style.cursor = "move";
                }
                obj.onmousedown = function (event) {
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    obj.style.zIndex = 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 < aLi.length; i++) {
                            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) {
                            oNear.className = "";
                            oNear.style.zIndex = minZindex++;
                            obj.style.zIndex = minZindex++;
                            startMove(oNear, aPos[obj.index]);
                            startMove(obj, aPos[oNear.index]);
                            //交换index
                            oNear.index += obj.index;
                            obj.index = oNear.index - obj.index;
                            oNear.index = oNear.index - obj.index;
                        } else {

                            startMove(obj, aPos[obj.index]);
                        }
                    }
                    clearInterval(obj.timer);
                    return false; //低版本出现禁止符号
                }
            }
            //碰撞检测
            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 < aLi.length; i++) {
                    if (obj == aLi[i]) continue;
                    if (colTest(obj, aLi[i])) {
                        var dis = getDis(obj, aLi[i]);
                        if (dis < minDis) {
                            minDis = dis;
                            minIndex = i;
                        }
                    }
                }
                if (minIndex == -1) {
                    return null;
                } else {
                    return aLi[minIndex];
                }
            }
        }

via：http://www.w2bc.com/Article/23686

在线预览    源码下载