[原创] EDrag 拖曳层类 v1.0 [复制链接]

eays　楼主

银牌会员

帖子: 612
体力: 2115
威望: 3
居住地: 广东省佛山市

发表于 2008-9-19 10:27:49 |显示全部楼层

已更新，加入onReady函数。

简单应用实例：
var dropArea = ["wrap","wrap2"];

EDrag.proxy("drag1","h1",["wrap"]);
EDrag.proxy("drag2","h1",dropArea);
EDrag.proxy("drag3","h1",dropArea);
EDrag.proxy("drag4","h1",dropArea);

EDrag.proxy("drag5","h1",["wrap2"]);
EDrag.proxy("drag6","h1",dropArea);
EDrag.proxy("drag7","h1",dropArea);
EDrag.proxy("drag8","h1",dropArea);

EF.onReady(function(){EDrag.init();});

运行代码，里面有更多说明，还请大家多提点意见。献丑了。感觉主要是易用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>无标题文档</title>
		<style type="text/css">
			body{
				margin:auto;
				font-size:12px;
			}
			.normal {
			    width: 300px;
				margin:13px auto 13px auto;
			    min-height: 200px;
			    padding: 2px;
			    border: 1px solid #666666;
			    background: #FFFFFF;
			}
			.normal h1 {
			    width: 300px;
			    height: 25px;
			    margin: 0px;
			    line-height: 25px;
			    font-size: 14px;
			    background-color: #CCC;
			}
		</style>
        <script type="text/javascript">
/**
 * eDrag 层拖曳javascript类
 * eDrag.proxy("拖曳层","标题","可以扔下的容器");
 * eDrag.init();
 * 
 * 
 * @author Eays
 * @version 1.1
 */           
var EDrag = _EDrag = {
	wraps: [],
	
	titles: [],
	
	target: [],
	
	document: document.documentElement || document.body,
	
	initialPosition: {x:0 ,y:0},
	
	dragArea: null,
	
	dragAreaCopy: null,
	
	dragParent: null,
	
	mouseOffset: 0,
	
	dragAreaId: null,
	
	releaseTarget: null,

init: function()
	{
		this.style.loadStyle();
		
		for (var i = 0 ; i < this.titles.length ; i++) 
		{
			var title = EF.get(this.wraps[i] , this.titles[i]);
			
			if(!title.releaseTarget)
				title.releaseTarget = this.target[i];
				
			title.onmousedown = this.down;
		}
		document.onmousemove = this.move;
		document.onmouseup = this.up;
	},
	
	proxy : function(area , drag , target)
	{
		this.wraps.push(area);
		this.titles.push(drag);
		target = target == undefined ? null : target;
		this.target.push(target);
		
	},
	
	down: function (e){
		e = EF.event(e);
		current = e.srcElement || e.target;
		
		EDrag.dragArea = EF.get( EF.getDragArea(current) );
		if(EDrag.dragArea){

//记录下拖拽对象原始位置
			EDrag.initialPosition = EDrag.dragArea.position();
			//创建一个原对象的影子
			EDrag.hadow = EDrag.fun.createShadow(EDrag.dragArea);

// 用影子替换原有对象并清空对象
			EDrag.dragArea = EDrag.dragArea.parentNode.replaceChild(EDrag.hadow , EDrag.dragArea);
			EDrag.hadow.html("");
			// 将原对象设为绝对
			EDrag.dragArea.setStyle("position" , "absolute");
			EDrag.dragArea.setStyle("left" , EDrag.initialPosition.x + "px");
			EDrag.dragArea.setStyle("top" , EDrag.initialPosition.y + "px");
			
			EDrag.dragAreaId = EDrag.dragArea.id;
			EDrag.dragAreaCopy = EDrag.dragArea.copy();
			
			EDrag.dragArea.setStyle("filter" , "alpha(opacity=70)");
			EDrag.dragArea.setStyle("opacity" , "0.7");
			
			EDrag.dragAreaCopy.hidden();
			EDrag.dragAreaCopy.setStyle("position" , "absolute");
			
			EDrag.dragArea.setStyle("margin" , "auto");
			// 添加原对象在文档未尾
			EDrag.document.lastChild.appendChild(EDrag.dragArea);
			// 鼠标的相对位置
			EDrag.mouseOffset = e.offset(EDrag.initialPosition);
			//保存release目标
			EDrag.releaseTarget = current.releaseTarget;
			EDrag.move(e);
		}
	},
	
	move: function(e)
	{
		if(!EDrag.dragArea)
			return false;
			
		e = EF.event(e);
		var position = e.offset(EDrag.mouseOffset);

if(position.x >= 0 && position.x <= EDrag.document.offsetWidth - EDrag.dragArea.offsetWidth)
			EDrag.dragArea.setStyle("left" , position.x +"px");
			
		if(position.y >= 0)	
			EDrag.dragArea.setStyle("top" , position.y +"px");
			
		//遍厉目标对象所有子节点，给出拖曳层的目标层
		for(var i in EDrag.releaseTarget)
		{
			var releaseTarget = EF.get(EDrag.releaseTarget[i]);
			
			var cover = releaseTarget.getCoverElement(EDrag.dragArea);
			
			if(cover && (EDrag.dragParent.last() != cover))
			{
				cover.parentNode.insertBefore(EDrag.hadow , cover);
			}else if(cover && EDrag.dragParent.last() == cover)
			{
				EDrag.dragParent.appendChild(EDrag.hadow);
			}	
		}	
	},
	
	up: function()
	{
		if(!EDrag.hadow && !EDrag.dragArea)
			return false;
		try{
			EDrag.dragArea.setStyle("position" , "static");
			EDrag.dragArea.parentNode.removeChild(EDrag.dragArea);
			EDrag.dragAreaCopy.id = EDrag.dragAreaId;
			EDrag.dragAreaCopy.removeAttribute("style");
			EDrag.dragAreaCopy.show();
			EDrag.dragParent.replaceChild(EDrag.dragAreaCopy , EDrag.hadow);
			EDrag.dragAreaCopy.setStyle("position" , "static");
			EDrag.init();
		}catch(e){
				
		}
		
		
	}

}

/**
 * 自带的移动样式
 */
EDrag.style = _EDrag.prototype = {
	defaultTitle: {
		border: "1px dotted #000;",
		cursor: "move"
	},
	
	defaultDotted: {
		border: "1px dotted #CCC",
		background: "#EEE"
	},
	
	loadStyle: function()
	{
		for(var i=0 ; i < EDrag.titles.length ; i++)
		{
			var title = EF.get(EDrag.wraps[i] , EDrag.titles[i]);

if(title != undefined)
			{
				title.setStyle("cursor" , EDrag.style.defaultTitle.cursor);
			} else {
				continue;
			}
		}
	},
	
	setBorder: function(element){
		element.setStyle("border" , EDrag.style.defaultDotted.border);
	},
	
	setBackground: function(element)
	{
		element.setStyle("background" , EDrag.style.defaultDotted.background);
	}
}

EDrag.fun = EF =  _EDrag.prototype = {
	
	eventExt: function(e)
	{
		e.position = function()
		{
			e = this;
			if(e.pageX || e.pageY){
				return {x:e.pageX, y:e.pageY};
			}
			return {
				x:e.clientX + document.body.scrollLeft - document.body.clientLeft,
				y:e.clientY + document.body.scrollTop  - document.body.clientTop
			};
		},
		
		e.offset = function(position)
		{
			e = this;
			var mouse  = e.position();
			return {x:parseInt(mouse.x - position.x), y:parseInt(mouse.y - position.y)};
		}
		
		return e;
	},
	
	event: function(e)
	{
		var e = e || window.event;
		return EF.eventExt(e);
	},
	
	getDragArea: function(current)
	{
		do{
			var name = current.id || current.tagName || current.name;
			if(EDrag.wraps.search(name))
				return EF.ext(current);
		}while(current = current.parentNode)
	},
	search: function(search , array)
	{
		
		var flag = false;
		array = array || this;
		
		array.sort(function(x , y){
			for (var i = 0; i < arguments.length; i++) 
			{
				if(arguments[i].toString() == search)
					flag = true;
			
			}
			return -1;
		});
		return flag;
	},
	
	_get: function()
	{
		return document.getElementById(arguments[0])
				|| document.getElementsByTagName(arguments[0])
				|| document.getElementsByName(arguments[0]);		
	},
	
	ext: function(object)
	{
		
		object.setStyle = function(type , value)
		{
			eval("object.style."+type+"='"+value+"'");
		}
		
		object.position = function()
		{
			return EF.position(this);
		}
		
		object.html = function(value)
		{
			if(value != undefined)
				return object.innerHTML = value;
			
			return object.innerHTML;
		}
		
		object.nodes = function()
		{
			var nodes = [];
			
			for(i = 0 ; i < this.childNodes.length ; i++)
			{
				var name = this.childNodes[i].toString();
				
				if(name.indexOf("Text") == -1 && name.indexOf("HTMLCollection") == -1)
				{
						nodes.push(this.childNodes[i]);
				}
			}
			return nodes;
		}
		
		object.last = function()
		{
			var nodes = this.nodes();
			return nodes[ nodes.length - 1 ];
		},
		
		object.hidden = function()
		{
			this.setStyle("display" , "none");
		},
		
		object.show = function()
		{
			this.setStyle("display" , "block");
		},
		
		object.copy = function()
		{
			return EF.get(this.cloneNode(true));
		},
		
		object.getCoverElement= function(current)
		{
			if(this.childNodes == undefined)
				return false;
			
			var nodes = this.nodes();
			for(i = 0 ; i < nodes.length ; i++)
			{
				var target = EF.get( nodes[i] );
				var name = target.toString();
				
				current = EF.ext(current);
				current.position = current.position();
				/**
				 * 相对的y坐标
				 */
				try{
					var left = target.getTopArea().centerX - current.position.x;
					var top = target.getTopArea().centerY - current.position.y ;
					
					 if((left < current.offsetWidth && left > 0 ) && (top -  target.offsetWidth / 4 < current.offsetHeight && top > 0))
					{
						EDrag.dragParent = this;
						return target;
					}else if((left < current.offsetWidth && left > 0 ) && (top < 0 && top >= 0 - target.offsetHeight / 6))
					{
						EDrag.dragParent = this;
						return target;
					}
				}
				catch(e){	}	
			}
			return false;
		}
		
		object.getTopArea = EF.getTopArea;
		
		return object;
	},
	
	get: function(element , sonElement)
	{
		var type = typeof element;
		
		if (type.indexOf("object") != -1) 
		{
			this.object = element;
			this.ext(this.object);
			return this.object;
		}
		
		if (arguments.length > 1) 
		{
			if (this._get(element).length == undefined) {
				this.object = this._get(element).getElementsByTagName(sonElement)[0];
				this.ext(this.object);
				return this.object;
			} else {
				this.object = this._get(element)[0].getElementsByTagName(sonElement)[0];
				this.ext(this.object);
				return this.object;
			}
		}
			this.object = this._get(element) || this._get(element)[0];	
			this.ext(this.object);
			return this.object;
	},
	
	position: function(e)
	{	
		var p = {x:0 , y:0};
		while (e.offsetParent)
		{
			p.x += e.offsetLeft;
			p.y  += e.offsetTop;
			e = e.offsetParent;
		}
		
		if (p.x != "" && p.y != "") 
		{
			return p;
		}
	},
	
	createBox: function()
	{
		var box = document.createElement("div");
		document.documentElement.lastChild.appendChild(box);
		return EF.get(box);
	},
	
	createShadow: function(current)
	{	
		if (oldShadow = document.getElementById("EDragShadow")) 
		{
			oldShadow.parentNode.removeChild(oldShadow);
		}
		
		current = EF.get(current);
		
		var shadow = current.copy();
		shadow = EF.get(shadow);
		shadow.id = "EDragShadow";
		shadow.setStyle("width" , current.offsetWidth - 6 + "px");
		shadow.setStyle("height" , current.offsetHeight - 6 + "px");
		EDrag.style.setBorder(shadow);
		EDrag.style.setBackground(shadow);
		return shadow;
	},
	/**
	 * 获取单个对象顶部区域,x,y轴中心点
	 * @param {Object} element
	 */
	getTopArea: function(element)
	{
		try{
		element = element || this;
		element = EF.get(element);
		/**
		 * 对象左边、顶部坐标
		 */
		var position = element.position();
		/**
		 * 对象的宽和高度
		 */
		var offset = {x:element.offsetWidth , y:element.offsetHeight};
		
		/**
		 * x轴中心点
		 */
		element.centerX = parseInt(position.x + offset.x / 2);
		element.centerY = parseInt(position.y + offset.y / 2);
		
		return element;
		}catch(e){}
		
		
	},
	
	isGecko: function()
	{
		return navigator.userAgent.indexOf("Gecko") == -1 ? false :true;
	},
	
	isOpera: function()
	{
		return navigator.userAgent.indexOf("Opera") == -1 ? false :true;
	},
	
	isIE: function()
	{
		return document.all ?  true : false;
	},
	
	onReady: function(newFunction)
	{
		if(newFunction == undefined)
			return false;
			
		this.domReady = false;
		
		if(functions == undefined)
			var functions = [];
			
		functions.push(newFunction);
		
		var initial = function()
		{
			for(var i in functions)
			{
				functions[i]();
			}
		}
		
		this.ready = function()
		{
			if(this.domReady)
				initial();
				
			if (EF.isGecko() || EF.isOpera()) {
				try {
					document.removeEventListener('DOMContentLoaded', initial);
				}catch(e){}
				
				document.addEventListener('DOMContentLoaded', initial, false);
				this.domReady = true;
			}
			else if (EF.isIE()) {
				
				var timer = window.setInterval(function()
				{
					try {
						document.body.doScroll("left");
						initial();
						window.clearInterval(timer);
						this.domReady = true;
					} 
					catch (e) {}
				}
				, 5);	
			}
		}
	this.ready();
		
	}
}

Array.prototype.search = EDrag.fun.search;

var dropArea = ["wrap","wrap2"];

EDrag.proxy("drag1","h1",["wrap"]);
EDrag.proxy("drag2","h1",dropArea);
EDrag.proxy("drag3","h1",dropArea);
EDrag.proxy("drag4","h1",dropArea);

EDrag.proxy("drag5","h1",["wrap2"]);
EDrag.proxy("drag6","h1",dropArea);
EDrag.proxy("drag7","h1",dropArea);
EDrag.proxy("drag8","h1",dropArea);

EF.onReady(function(){EDrag.init();});
                 
                    
        </script>
    </head>
    <body>
<table width="778" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">	<div  id="wrap">
        <div class="normal" id="drag1">
            <h1>我不可以拖到右边</h1>
            <p>
                设置拖放对象以限制拖放区域
            </p>
            <p>
                例：EDrag.proxy( wrap , title , releaseTarget );
            </p>
            <p>
                releaseTarget 为拖放区域的id,tagName,name数组
            </p>
        </div>
        <div class="normal" id="drag2">
            <h1>拖放对象说明</h1>
            <p id="msg4">
                拖放对象继承原对象的所有css特性
            </p>
            <p>
                但似乎对float无效，比要的时候可以外加一个table
            </p>
            <p>
                继承对象保证拖放后的对象和别原对象的一致性
            </p>
        </div>
        <div class="normal" id="drag3">
            <h1>将一个层交给eDarg代理</h1>
            <p>
                EDrag.proxy( wrap , title , releaseTarget );
            </p>
            <p>
                wrap 为可以拖动的层，推荐使用ID
            </p>
            <p>
                title 标题，为鼠标放在上面可以拖动的对象,推荐使用tagName ,releaseTarget上面有说明
            </p>
        </div>
        <div class="normal" id="drag4">
            <h1>初始化EDrag拖曳</h1>
            <p>
                EDrag.init();
            </p>
            <p>
                说明：init() 需要在proxy()方法后面调用
            </p>
            <p>
                这样的结构应该非常易用
            </p>
        </div>
	</div>
	
	
	
	</td>
    <td  valign="top">
    	<div  id="wrap2">
        <div class="normal" id="drag5">
            <h1>我不可以拖到左边</h1>
            <p>
                附带函数对象 EDrag.fun 简写EF
            </p>
            <p>
                EF.get();可以支持两个参数,一个参数也可以
            </p>
            <p>
                如：EF.get("wrap" , "h1"); 表示在wrap元素内部的h1元素
            </p>
        </div>
        <div class="normal" id="drag6">
            <h1>EF.get函数说明</h1>
            <p>
                凡是通过EF.get()函数获得的对象都是经过dom扩展的
            </p>
            <p>
                具有一些基本的扩展功能
            </p>
            <p>
                例如：EF.get("wrap").html("demo");
				EF.get("wrap").setStyle("margin" , "auto");
            </p>
        </div>
        <div class="normal" id="drag7">
            <h1>优势</h1>
            <p>
                拖曳后的节点上的对象和原对象完全相同，不会影响原排版
            </p>
            <p>
                其它的没什么了，只是感觉比较易用
            </p>
            <p>
                
            </p>
        </div>
        <div class="normal" id="drag8">
            <h1>新加入onReady函数</h1>
            <p>
                onReady类似jquery的ready ，使用onReady的优势在于可以在DOM加载完后运行多个函数，
				而已运行速度比window.onload快得多
            </p>
            <p id="msg">
               
            </p>
            <p>
                
            </p>
        </div>
	</div>
		
		
    </td>
  </tr>
</table>
    </body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 eays 于 2008-9-20 15:46 编辑 ]

已有 1 人评分	威望	收起理由
xling	+ 2	原创内容

总评分: 威望 + 2 查看全部评分

		自动登录	找回密码
密码			注册

[原创] EDrag 拖曳层类 v1.0 [复制链接]

回复 1# eays [楼主] 的帖子

浏览过的帖子

浏览过的版块

维基贡献