拖拽的原理

onmousedown 选择元素
onmousemove 移动元素
onmouseup 释放元素

1：如果拖拽的时候有文字:被选中，会产生问题
原因：当鼠标按下的时如果页面中有文字或者图片被选中的时候，则会发生文字默认可以被拖动，因此
标准 ：e.preventDefalut();
阻止他的默认行为 非标准的阻止默认行为
非标准：window.event.returnValue=false;

2：给某元素设置全局捕获，当我们给一个元素设置全局捕获，那么这个元素会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素触发
obj.setCapture();

示例代码：

function drag(obj){   //obj传入一个element
            obj.onmousedown=function(ev){
                var e=ev || event;
                var L=e.clientX-obj.offsetLeft;
                var T=e.clientY-obj.offsetTop;

                document.onmousemove=function(ev){
                    var e=ev || event;
                    //兼容ie无法阻止事件的默认行为，设置全局捕获，这个全局捕获也只适用于ie
                    if(obj.setCapture){
                    obj.setCapture();
                    }
                    var oL=e.clientX-L;
                    var oT=e.clientY-T;
                    var w=winW();
                    var h=winH();
                    //给拖拽添加吸附效果
                    if(oL<150){oL=0}else if(oL> w-obj.offsetWidth-150){ oL=w-obj.offsetWidth}
                    if(oT<150){oT=0}else if(oT> h-obj.offsetHeight-150){oT=h-obj.offsetHeight}
                    obj.style.left=oL+\'px\';
                    obj.style.top=oT+\'px\';
                }
                document.onmouseup=function(){
                    document.onmouseup=document.onmousemove=null;
                    //释放全局捕获
                    if(obj.releaseCapture){
                        obj.releaseCapture();
                    }
                }
                return false;
            }
      }

 

碰撞原理

检测位置重合或者边重合

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute; z-index: 2;}
#img1 { position: absolute; left: 500px; top: 200px;}
</style>
<script>
window.onload = function() {
	
	var oDiv = document.getElementById(\'div1\');
	var oImg = document.getElementById(\'img1\');
	
	drag(oDiv);
	
	function drag(obj) {
		
		obj.onmousedown = function(ev) {
			var ev = ev || event;
			
			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;
			
			if ( obj.setCapture ) {
				obj.setCapture();
			}
			
			document.onmousemove = function(ev) {
				var ev = ev || event;
				
				var L = ev.clientX - disX;
				var T = ev.clientY - disY;
				
				var L1 = L;
				var R1 = L + obj.offsetWidth;
				var T1 = T;
				var B1 = T + obj.offsetHeight;
				
				var L2 = oImg.offsetLeft;
				var R2 = L2 + oImg.offsetWidth;
				var T2 = oImg.offsetTop;
				var B2 = T2 + oImg.offsetHeight;
				
				if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
					oImg.src = \'1.jpg\';
				} else {
					oImg.src = \'2.jpg\';
				}
				
				obj.style.left = L + \'px\';
				obj.style.top = T + \'px\';
				
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
    <img src="1.jpg" id="img1" />
</body>
</html>

 这里检测发生碰撞碰撞图片发生颜色变化

 

扩展

1、拖拽改变层大小

2、模拟滚动条控制内容滚动

3、模拟滚动条控制元素的变化

 

版权声明：本文为llcMite原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/llcMite/p/6229719.html