JavaScript之拖拽功能、封装

通过之前一段时间的学习，逐步掌握了JavaScript的一些基本语法，学完之后还得多加练习，根据所学知识，做了一个简易的拖拽功能。

首先先布好html结构，包括样式，这里简单的做了两个拖拽的功能，一个相对于document，一个相对于id = ‘box’，为了消除浏览器自带的文本拖拽功能，添加了一行文字；

演示地址

html代码：

全选试试拖拽

效果图：一个相对于document，一个相对于#box

js调用代码：

消除浏览器自带的文本选中拖拽功能：

ie8及以下版本：

if(obj.setCapture){	//设置全局捕获==>取消浏览器默认的文字拖拽（ie8及以下）
			obj.setCapture();
			}

标准及ie8以上版本（因为浏览器文本拖拽功能是onmousedown事件触发的，所以只要令该事件的返回值为空即可）：

obj.onmousedown = function(){
	return false;
}

防止被拖拽的元素跑到拖拽区域外面去了，所以需要限制拖拽的范围：left范围在  0 ~ 拖拽区的content宽-被拖拽元素的offsetWidth，top范围在  0 ~ 拖拽区的content高-被拖拽元素的offsetHeight；为了达到磁性吸附的功能，在上诉区域内向内减少20个像素作为判断，即当被拖拽元素的left值，top值距离边框少于20px时，被拖拽元素自动贴上去，即left=0， top=0；

代码如下：

if(leftArea < 20){
	leftArea = 0;
}else if(leftArea>w-obj.offsetWidth-20){
	leftArea = w-obj.offsetWidth;
}
if(topArea < 20){
	topArea = 0;
}else if(topArea>h-obj.offsetHeight-20){
	topArea = h -obj.offsetHeight;
}

封装的js完整代码：

function drag(obj,box){//第一个参数是被拖拽的元素，第二个参数是拖拽的限制区域；例如上面调用的#box和document
	obj.onmousedown = function(ev){
		var ev = ev || event;
		var dragl = ev.clientX - this.offsetLeft;
		var dragt = ev.clientY - this.offsetTop;
		
		if(obj.setCapture){//设置全局捕获==>取消浏览器默认的文字拖拽（ie8及以下）
			obj.setCapture();
			}
		
		document.onmousemove = function(ev){
			var ev =ev || event;
			var leftArea = ev.clientX - dragl;
			var topArea = ev.clientY - dragt;
			var w=null,h=null;
			if(box == document){
				w = document.documentElement.clientWidth
				h = document.documentElement.clientHeight
				}else{
					w = box.scrollWidth;
					h = box.scrollHeight;
					}
			
			if(leftArea < 20){
				leftArea = 0;
				}else if(leftArea>w-obj.offsetWidth-20){
					leftArea = w-obj.offsetWidth;
					}
			if(topArea < 20){
				topArea = 0;
				}else if(topArea>h-obj.offsetHeight-20){
					topArea = h -obj.offsetHeight;
					}
			
			obj.style.left =  leftArea + 'px';
			obj.style.top =  topArea + 'px';
			}
		document.onmouseup = function(){
			document.onmousemove =null;
			document.onmouseup = null;
			if(obj.releaseCapture){//取消全局捕获
				obj.releaseCapture();
				}
			}
		return false;//取消浏览器默认的文字拖拽 标准浏览器，ie8以上
		}
}

下载地址