dom结构拖动排序

//通过class获取元素function getClass(cls) {    var ret = [];    var els = document.getElementsByTagName("*");    for(var i = 0; i < els.length; i++) {        //判断els[i]中是否存在cls这个className;.indexOf("cls")判断cls存在的下标，如果下标>=0则存在;        if(els[i].className === cls || els[i].className.indexOf("cls") >= 0 || els[i].className.indexOf(" cls") >= 0 || els[i].className.indexOf(" cls ") > 0) {            ret.push(els[i]);        }    }    return ret;}//获取属性function getStyle(obj, attr) {     return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];}function startMove(obj, json, fun) {    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) / 6;            //运动速度如果大于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);            if(fun) {                fun();            }        }    }, 30);}window.onload = function() {    var oUl = document.getElementById("box");    var aLi = $(".item");    var afLi = $(".items");    var disX = 0;    var disY = 0;    var minZindex = 1;    var aPos = [];//  var container1W = $(".items").eq(1).width();//  var container1H = $(".items").eq(1).height();    for(var i = 0; i < afLi.length; i++) {        var t = afLi[i].offsetTop;        var l = afLi[i].offsetLeft;//      aLi[i].style.width = container1W + "px";//      aLi[i].style.height = container1H + "px";        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]);    }    window.addEventListener("resize", function() {        for(var i = 0; i < afLi.length; i++) {            var t = afLi[i].offsetTop;            var l = afLi[i].offsetLeft;            aLi[i].style.top = t + "px";            aLi[i].style.left = l + "px";            aPos[i] = {                left: l,                top: t            };            aLi[i].index = i;        }    })    //拖拽    function setDrag(obj) {        obj.onmouseover = function() {            obj.style.cursor = "move";        }        obj.onmousedown = function(event) {            obj.className = "item draging";            obj.style.zIndex = minZindex++;            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 = "item";                }                obj.className = "item draging";                var oNear = findMin(obj);                if(oNear) {                    oNear.className = "item active";                }            }            document.onmouseup = function() {                document.onmousemove = null; //当鼠标弹起时移出移动事件                document.onmouseup = null; //移出up事件，清空内存                obj.className = "item";                //检测是否普碰上，在交换位置                var oNear = findMin(obj);                if(oNear) {                    oNear.className = "item";                    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];        }    }};

<div id="box">                    <div class="items">                        <div class="item">                            <div>1212</div>                        </div>                    </div>                    <div class="items">                        <div class="item">                            <div>23232</div>                        </div>                    </div>                    <div class="items">                        <div class="item">                            <div>343434</div>                        </div>                    </div>                    <div class="items">                        <div class="item">                        </div>                    </div>                    <div class="items">                        <div class="item">                        </div>                    </div>                    <div class="items">                        <div class="item">                        </div>                    </div>                    <div class="items">                        <div class="item">                        </div>                    </div>                    <div class="items">                        <div class="item">                        </div>                    </div>                    <div class="items">                        <div class="item">                        </div>                    </div>                </div>

@charset "utf-8";/****************轮播图  拖拽 start*******************/#box {  height: auto;  position: relative;}#box .items {  width: 100%;  height: 377px;  margin-bottom: 0.12rem;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  border: 1px solid #ccc;}#box .item {  width: 100%;  height: 377px;  z-index: 1;  overflow: hidden;}#box .item.active {  -webkit-transition: -webkit-transform 0.3s;  -moz-transition: -moz-transform 0.3s;  -ms-transition: -ms-transform 0.3s;  -o-transition: -o-transform 0.3s;  transition: transform 0.3s;  -webkit-transform: scale(1.1);  -moz-transform: scale(1.1);  -ms-transform: scale(1.1);  -o-transform: scale(1.1);  transform: scale(1.1);}#box .item.draging {  width: 100%;  height: 377px;  position: absolute;  z-index: 500;  -webkit-box-shadow: 0 0 8px #0095CD;  -moz-box-shadow: 0 0 8px #0095CD;  box-shadow: 0 0 8px #0095CD;}#box .itemBot.draging {  width: 100%;  height: 377px;}/****************轮播图  拖拽 end*******************/