拖拽

HTML

文字文字文字文字
<div id="box"></div>
<img src="img/2.jpg"/>

CSS

#box,img{
	width: 50px;
	height: 50px;
	background: red;
	position: absolute;
}

JS

/*
 拖拽的时候，如果有文字被选中，会产生问题
	原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果
	解决：标准下： 阻止默认行为  非标准下：全局捕获
	拖拽图片会有相同问题，解决方法同上
	
全局捕获
obj.setCapture();
设置全局捕获，当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发
 ie:有，并且有效果
 ff:有，但是没有效果
 chrome:没有
 
 释放全局捕获
 obj.releaseCapture();
 * */
var Box=document.getElementById("box");
var oImg=document.getElementsByTagName("img")[0];

drag(oImg);
drag(Box);

function drag(obj){
	obj.onmousedown=function(ev){
		var ev=ev||event;
		
		
		var disX=ev.clientX-this.offsetLeft;
		var disY=ev.clientY-this.offsetTop;
		
		//设置全局捕获
		//所有的onmousemove或者onmouseup都被oImg截获，然后作用在oImg身上
		if(obj.setCapture){
			obj.setCapture();
		}
		
		document.onmousemove=function(ev){
			var ev=ev||event;
			
			var L=ev.clientX-disX;
			var T=ev.clientY-disY;
			
			//限制拖拽范围
			//横向
			if(L<0){
				L=0;
			}else if(L>document.documentElement.clientWidth-obj.offsetWidth){
				L=document.documentElement.clientWidth-obj.offsetWidth;
			}
			//纵向
			if(T<0){
				T=0;
			}else if(T>document.documentElement.clientHeight-obj.offsetHeight){
				T=document.documentElement.clientHeight-obj.offsetHeight;
			}
			
			obj.style.left=L+'px';
			obj.style.top=T+'px';
		}
		
		document.onmouseup=function(){
			document.onmousemove=null;
			//释放全局捕获
			if(obj.releaseCapture){
				obj.releaseCapture();
			}
		}
		
		//清除默认事件
		return false;
	}
}