关闭

h5拖放2

131人阅读 评论(0) 收藏 举报
分类:
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>


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

H5拖放API基础篇

不要搞错,本文不是讲如何拖地的。看过《javascript精粹》朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了。最近在园子见一园友写了一篇《HTML5 进阶系列:拖放 API 实现拖放排序》,真乃大师之作,大~熊同学作为一代菜鸟(不是宗...
  • qq_36648555
  • qq_36648555
  • 2017-11-04 00:04
  • 98

HTML5--拖拽API(含超经典例子)

一、关于拖拽API 拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成,实际开发中使用比例占到3成,学习要求个人认为是达到掌握即可的程度。 二、什么是拖拽和释放? 拖拽:Drag 释放:Drop 拖拽指的是鼠标点击源对象后一直移动对象不松手,一但...
  • baidu_25343343
  • baidu_25343343
  • 2016-11-18 13:08
  • 14639

H5完成拖拽,复制数据功能~

在React 、Redxu 、Dva框架背景下实现h5拖拽复制~ 需求如图:我想在模板预览组件中拖拽某个模板至页面预览~ 看代码: 要被拖拽的元素设置一些必须的属性:draggable、onDragStart div draggable="true" onDragSt...
  • Meditate_MasterYi
  • Meditate_MasterYi
  • 2018-01-06 19:12
  • 55

H5 拖放事件详解

H5 拖放事件详解 拖放事件 H5的拖放事件提供了多个接口: 1、drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2、dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转义键),应用在被拖拽元素上 3、dragenter:当一个被拖动的元素...
  • ComeOnZhao
  • ComeOnZhao
  • 2017-04-26 22:47
  • 587

HTML5元素拖拽drag与拖放drop相关API

其实HTML5就是新增一些有用的API 让我们更轻松的开发 从而把更多精力都放在业务逻辑上来 这些API的使用也非常简单 不过我的记性不太好 所以还是以博客的形式记录下来(手动滑稽) 今天就来写一下这个拖拽API默认拖拽说起拖放,其实最早实现拖放功能的还是IE(IE4) H5就是在IE...
  • q1056843325
  • q1056843325
  • 2017-03-08 21:26
  • 2508

练习笔记:使用jQuery实现H5拖放(drag 和 drop)功能

遇到问题1: 在js里面可直接e.dataTransfer.setData("obj_add",e.target.id); 使用jQuery绑定事件时,需e.originalEvent.dataTransfer.setData("obj_add",e.tar...
  • leiliz
  • leiliz
  • 2017-02-08 14:46
  • 3469

实现H5的拖放

HTML5在标准中增加了对元素拖放(Drag and Drop)的支持,这有利于实现更好的交互和更极致的用户体验,通过js配合draggable属性,就能实现这样的效果draggable属性draggable属性不支持IE8之前的浏览器。当我们想让一个元素是可拖动的,我们必须把通过js这个属性设为t...
  • sysuzhyupeng
  • sysuzhyupeng
  • 2017-02-25 17:50
  • 179

HTML5拖放事件

拖放是在“拖放源”和“拖放目标”之间传输数据的用户界面,它可以存在相同应用之间也可以是不同应用之间。 拖放源:任何有HTML draggable属性的文档元素都是拖放源。 拖放目标:任何文档都可以是拖放目标,这不需要像拖放源一样设置HTML属性,只需要简单的定义合适的事件即可。
  • u012729094
  • u012729094
  • 2016-05-05 14:28
  • 1612

使用touch-punch.js实现移动端的拖放效果

一、下载文件并引入 下载地址:http://touchpunch.furf.com/ 引入: 这里可以查看参数http://www.cnblogs.com/ganqiyin/archive/2013/12/12/3471622.html 二、使用 html部分: ...
  • u012011360
  • u012011360
  • 2015-05-15 12:17
  • 3816

HTML5 拖放事件 案例

.one{ width: 400px; height: 400px; border: 1px solid #000; } .one>div,.two>div{ ...
  • u011301203
  • u011301203
  • 2016-11-10 22:34
  • 486
    个人资料
    • 访问:7903次
    • 积分:503
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:5篇
    • 译文:0篇
    • 评论:3条
    文章分类
    文章存档