SOURCE

 function getStyle(obj,name){
            return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
        }
        function move(obj,json,opitions){
            //opitions={ duration,easing,complete}
            opitions = opitions || {};
            opitions.duration = opitions.duration || '800';
            opitions.easing = opitions.easing || 'ease-in';
            clearInterval(obj.timer);
            //json={width:0,height:0};
            var start = {};
            //json={width:200,height:200};
            var dis= {};
            for(var name in json){
                start[name] = parseFloat(getStyle(obj,name));
                dis[name] = json[name]-start[name];
            }
            var count = Math.floor(opitions.duration/30);
            var n = 0;
            obj.timer = setInterval(function(){
                n++
                for(var name in json){
                    switch(opitions.easing){
                        case 'linear':
                            var a = n/count;
                            var cur = dis[name]*a;
                            break;
                        case 'ease-in':
                            var a = n/count;
                            var cur = dis[name]*a*a*a;
                            break;
                        case 'ease-out':
                            var a = 1-n/count;
                            var cur = dis[name]*(1-a*a*a);
                            break;
                    }
                    /*var a = n/count;
                    var cur = dis[name]*a;*/
                    if(name=='opacity'){
                        obj.style[name]=start[name]+cur;
                        obj.style.filter='alpha(opacity:'+(start[name]+cur)*100+')';
                    }else{
                        obj.style[name]=start[name]+cur+'px';
                    }
                }
                if(n==count){
                    clearInterval(obj.timer);
                    opitions.complete && opitions.complete();
                }
            },30);
        }
    
        // 获取两个物体之间的距离
        function getDis(obj1,obj2) {

            //中心店坐标
            var l1 = obj1.offsetLeft + obj1.offsetWidth/2;
            var t1 = obj1.offsetTop + obj1.offsetHeight/2;

            var l2 = obj2.offsetLeft + obj2.offsetWidth/2;
            var t2 = obj2.offsetTop + obj2.offsetHeight/2;
            var a = l2 - l1;
            var b = t2 - t1;

            
            return Math.sqrt(a*a+b*b);
        }

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

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

            if (l1 > r2 || t1 > b2 || r1 < l2 || b1 < t2) {
                return false;
            } else {
                return true;
            }
        }

        window.onload = function() {
            var oUl = document.getElementById('ul1');
            var aLi = oUl.children;
            var oBtn = document.getElementById('btn1');
            var zIndex = 1000;

            // 布局转化
            var aPos = [];
            for (var i = 0; i < aLi.length; i++) {
                aPos[i] = {
                    left: aLi[i].offsetLeft,
                    top: aLi[i].offsetTop
                };
            }
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].style.left = aPos[i].left + 'px';
                aLi[i].style.top = aPos[i].top + 'px';
                aLi[i].style.position = 'absolute';
                aLi[i].style.margin = 0;
            }
 
            // 拖拽
            for (var i = 0; i < aLi.length; i++) {
                drag(aLi[i]);
                aLi[i].index = i;
            }

            // 随机换位置
            oBtn.onclick = function() {
                aPos.styleort(function() {
                    return Math.random() - 0.5;
                });

                for (var i = 0; i < aLi.length; i++) {
                    move(aLi[i], aPos[aLi[i].index]);
                }
            };

            function drag(obj) {
                obj.onmousedown = function(ev) {
                    var oEvent = ev || event;
                    zIndex++;
                    // 保证当前拖拽的物体在最上面
                    obj.style.zIndex = zIndex;
                    var disX = oEvent.clientX - obj.offsetLeft;
                    var disY = oEvent.clientY - obj.offsetTop;
                    document.onmousemove = function(ev) {
                        var oEvent = ev || event;
                        obj.style.left = oEvent.clientX - disX + 'px';
                        obj.style.top = oEvent.clientY - disY + 'px';
                        for (var i = 0; i < aLi.length; i++) {
                            aLi[i].style.border = '1px solid #000';
                        }

                        var oNear = findNearest(obj);
                        if (oNear) {
                            oNear.style.border = '3px dashed #f60';
                        }
                    };
                    document.onmouseup = function() {
                        document.onmousemove = null;
                        document.onmouseup = null;

                        var oNear = findNearest(obj);
                        if (oNear) {
                            // 碰到了 要换位置
                            // obj -> oNear
                            // oNear -> obj
                            move(oNear, aPos[obj.index]);
                            move(obj, aPos[oNear.index]);

                            // 交换索引位置
                            var temp;
                            temp = oNear.index;
                            oNear.index = obj.index;
                            obj.index = temp;
                            oNear.style.border = '1px solid #000';
                        } else {
                            // 没有找到最近的物体 回到原来的位置
                            move(obj, aPos[obj.index]);
                        }

                        obj.releaseCapture && obj.releaseCapture();
                    };
                    obj.setCapture && obj.setCapture();
                    return false;
                };
            }

            function findNearest(obj) {
                var iMin = 999999999;
                var iMinIndex = -1;
                for (var i = 0; i < aLi.length; i++) {
                    if (obj == aLi[i]) continue;
                    // 判断当前物体跟哪些物体有碰撞
                    if (collTest(obj,aLi[i])) {
                        // 求两个物体之间的距离
                        var dis = getDis(obj,aLi[i]);
                        if (iMin > dis) {
                            iMin = dis;
                            iMinIndex = i;
                        }
                    }
                }
                if (iMinIndex == -1) {
                    return null;
                } else {
                    return aLi[iMinIndex];
                }
            }
        };

 <ul id="ul1">
        <li><!--<img src="" alt="">-->1</li>
        <li><!--<img src="" alt="">-->2</li>
        <li><!--<img src="" alt="">-->3</li>
        <li><!--<img src="" alt="">-->4</li>
        <li><!--<img src="" alt="">-->5</li>
        <li><!--<img src="" alt="">-->6</li>
        <li><!--<img src="" alt="">-->7</li>
        <li><!--<img src="" alt="">-->8</li>
        <li><!--<img src="" alt="">-->9</li>
        <li><!--<img src="" alt="">-->6</li>
        <li><!--<img src="" alt="">-->7</li>
        
    </ul>

 * { 
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #ul1 {
            width: 516px;
            overflow: hidden;
            margin: 50px auto;
        }
        #ul1 li {
            width: 150px;
            height: 150px;
            float: left;
            margin: 10px;
            border: 1px solid #000;
            background-color: aqua;
            text-align: center;
            font-size: 100px;
            line-height: 150px;
            color: blue;
        }
        #ul1 li img {
            width: 100%;
            height: 100%;
        }