h5拖放2

DragDrop.js

/**
 * Created by wwtliu on 16/6/28.
 */

(function(){

    var disX = 0;
    var disY = 0;
    var minZindex = 1;
    var aPos = [];
    

    function setDrag(obj,aLi) {
        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,aLi);
                if (oNear) {
                    oNear.className = "active";
                }
            }
            document.onmouseup = function () {
                document.onmousemove = null;//当鼠标弹起时移出移动事件
                document.onmouseup = null;//移出up事件，清空内存
                //检测是否普碰上，在交换位置
                var oNear = findMin(obj,aLi);
                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 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,aLi) {
        var minDis = 99;
        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];
        }
    }

//碰撞检测
    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 getStyle(obj, attr) {//解决JS兼容问题获取正确的属性值
        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) / 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);
                if (fun) {
                    fun();
                }
            }
        }, 30);
    }

    window.setDrag = setDrag;
    window.aPos =aPos;
})();

03通过插件拖放交换图片.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		img{
			display: block;
		}
		.list{
			width: 720px;
			margin: 100px auto;
			background: pink;
			overflow: hidden;
		}
		.list li{
			float: left;
		}
	</style>
	<body>
		<ul class="list" id="list">
			<li><img src="images/1.jpg" /></li>
			<li><img src="images/2.jpg" /></li>
			<li><img src="images/3.jpg" /></li>
			<li><img src="images/4.jpg" /></li>
			<li><img src="images/5.jpg" /></li>
			<li><img src="images/6.jpg" /></li>
		</ul>
	</body>
	<script src="DragDrop.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//1.获取所有的li列表
		
		var list = document.getElementById('list').getElementsByTagName('li');
		
		//2.遍历li添加left  top 
		
		for(var i = 0; i<list.length;i++){
			
			//3.获取li当前的left  top位置值
			
			var left = list[i].offsetLeft;
			
			
			var top1 = list[i].offsetTop;
			
			//4.记录下当前元素的left  top值 存储到aPos数组中 
			
			aPos[i] = {left:left,top:top1};
			
			//5.给当前的元素添加自定义的索引值
			
			list[i].index = i;
			
			//6.设置当前元素的left  top为它当前的位置，防止突然定位之后跑到左上角
			
			list[i].style.left = left + 'px';
			
			list[i].style.top = top1 + 'px';
			
			
			console.log(top1);
			
			
			
		}
		
		setTimeout(function(){
			//延迟执行一会儿。
				for(i=0; i<list.length;i++){
					
					//给所有的li添加定位
					list[i].style.position = 'absolute';
					
					//清除默认的外边距防止影响定位
					list[i].style.margin = 0;
					
					//执行拖放交换的方法，第一个参数是当前的li元素，第二个参数就是list  li列表
					setDrag(list[i],list);
				}
			
			
		},500);
		
		
		/**
		 * 1.先是获取到li的left top值
		 * 2. 设置left top为当前位置 
		 * 3. 加了绝对定位    导致获取到的left top值变了
		 * 可能出现的问题：循环瞬间完成了 。定位也瞬间执行完，可能又重新获取了 left  top
		 * 因此把之前的操作完成之后 ，延时去设置定位
		 * 
		 */
		
		
		
	</script>
</html>