打印

[原创] EDrag 拖曳层类 v1.0

eays [楼主]

银牌会员

帖子: 584
体力: 2039
威望: 3
当前: 广东佛山
离线: 15 天

专长 PHP,JAVA,MySQL

1^# 大中小发表于 2008-9-19 10:27

已更新，加入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 编辑 ]

本帖最近评分记录

xling 威望 +2 原创内容 2008-9-19 12:45

通用网摘代码

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

blueida

初级会员

帖子: 33
体力: 78
威望: 0
当前: 云南昆明
离线: 73 天

专长 网页设计,前端制作

2^# 大中小发表于 2008-9-19 10:44

感覺限制拖放区域有點意思，IE7下正常

我還活着

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

eays [楼主]

银牌会员

帖子: 584
体力: 2039
威望: 3
当前: 广东佛山
离线: 15 天

专长 PHP,JAVA,MySQL

3^# 大中小发表于 2008-9-19 11:02

呵呵，一般网页都是三列结构，中间一列最宽，
此举也是为了防止由于列的宽度不一致引起的混乱

通用网摘代码

TOP

掌握加薪筹码 IT薪资宝典给您答案！ | 《疯狂的程序员》劲爆上市

richiefans

初级会员

帖子: 38
体力: 78
威望: 0
离线: 1 天

4^# 大中小发表于 2008-9-19 11:13

不错啊期待完善后放出
感谢收藏此帖

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

mypda07

中级会员

帖子: 142
体力: 279
威望: 2
当前: 湖南长沙
离线: 17 天

专长 网页设计,UI,JS

5^# 大中小发表于 2008-9-21 11:48

FF下无效

TOP

cloudgamer

银牌会员

帖子: 520
体力: 1080
威望: 2
当前: 广东佛山

6^# 大中小发表于 2008-9-21 12:56

利用鼠标捕获可以捕获浏览器外的鼠标拖放
参考
http://www.cnblogs.com/cloudgamer/archive/2008/07/21/1247267.html

TOP

eays [楼主]

银牌会员

帖子: 584
体力: 2039
威望: 3
当前: 广东佛山
离线: 15 天

专长 PHP,JAVA,MySQL

7^# 大中小发表于 2008-9-21 21:15

FF几？我FF3测试通过

通用网摘代码

TOP

skybot

size

钻石会员

帖子: 2852
体力: 6673
威望: 6
当前: 上海长宁

专长 JS,C#,MSSQL

8^# 大中小发表于 2008-9-22 08:51

FF 又不是标准,做应用只IE,..呵呵,.网站就要FF,IE 什么什么的一大堆了

http://www.qlili.com 个人站帮点啊

TOP

eays [楼主]

银牌会员

帖子: 584
体力: 2039
威望: 3
当前: 广东佛山
离线: 15 天

专长 PHP,JAVA,MySQL

9^# 大中小发表于 2008-9-22 08:59

是啊，谁有firefox 1.5以上的帮忙测试下

通用网摘代码

TOP

wolong

帅绝人寰

银牌会员

帖子: 2381
体力: 1379
威望: 0
当前: 四川成都

专长 PHP,MySQL

10^# 大中小发表于 2008-9-22 10:15

有个小bug，从一边移动到另一边时，无法直接移动到最下面，需要先移动到倒数第二后，才能移动到最下面

英雄不会读诗书

TOP

mypda07

中级会员

帖子: 142
体力: 279
威望: 2
当前: 湖南长沙
离线: 17 天

专长 网页设计,UI,JS

11^# 大中小发表于 2008-9-22 10:35

是不是我理解得不对,点"运行代码"后页面中那八个面板,我除了看看,没找到啥地方可以拖动

TOP

faeng220

小秦

银牌会员

帖子: 755
体力: 1529
威望: 4
当前: 河南平顶山

专长 前端制作,JS,ASP

12^# 大中小发表于 2008-9-22 13:38

提出一个Bug

拖动那个我不可以拖动到右边的那个层.然后把它拖动窗口.这个时候,释放鼠标左键..
然后再将鼠标移到网页中,点一下左键...

会有很有趣的现象...
如果你要其他的层上面点左键的话,,那么这个被拖动的层,将会变的不可以再拖动.
而如果是在网页的空白处点..那这个被拖动的层,会消失...

记得拖出窗口的时候..要向窗口下面拖动...左上,左,右脚本好像做的有限制.层不会跟着出去..而向下则会出去...

偶系小秦！

TOP

eays [楼主]

银牌会员

帖子: 584
体力: 2039
威望: 3
当前: 广东佛山
离线: 15 天

专长 PHP,JAVA,MySQL

13^# 大中小发表于 2008-9-22 20:21

针对小秦提出的问题。简单的处理一下，

<!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.0
 */           
var EDrag = _EDrag = {
	wraps: [],
	
	titles: [],
	
	target: [],
	
	document: document.documentElement || document.body,
	
	initialPosition: {x:0 ,y:0},
	
	dragArea: null,
	
	shadow: 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){
		if(EDrag.shadow)
			EDrag.up();
		
		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.shadow = EDrag.fun.createShadow(EDrag.dragArea);
			// 用影子替换原有对象并清空对象
			EDrag.dragArea = EDrag.dragArea.parentNode.replaceChild(EDrag.shadow , EDrag.dragArea);
			EDrag.shadow.html("");
			// 将原对象设为绝对
			EDrag.dragArea.setStyle("position" , "absolute");
			EDrag.dragArea.setStyle("zIndex" , "100");
			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.shadow , cover);
			}else if(cover && EDrag.dragParent.last() == cover)
			{
				EDrag.dragParent.appendChild(EDrag.shadow);
			}	
		}	
	},
	
	up: function()
	{
		if(!EDrag.shadow && !EDrag.dragArea)
			return false;
		
		EDrag.dragArea.setStyle("zIndex" , "0");
		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.shadow);
			EDrag.shadow = null;
			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>

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

另外此js类已有更新版，增加了拖到最后、父元素无子元素时扔下、从proxy中remove层，和一此细节调整。

[ 本帖最后由 eays 于 2008-9-22 23:10 编辑 ]

通用网摘代码

TOP

yanguan025

新手上路

帖子: 2
体力: 3
威望: 0
离线: 21 天

14^# 大中小发表于 2008-11-10 10:47

提出一个BUG
如果都设定左右两边都可以拖
然后把左边全部拖到右边那从右边就不可以拖回左边
还有拖曳层在移动的时候不能和目标栏大小一致

[ 本帖最后由 yanguan025 于 2008-11-10 10:53 编辑 ]

TOP

phoenixtreeshow

初级会员

帖子: 73
体力: 134
威望: 0
当前: 浙江杭州
离线: 2 天

专长 网页设计,SEO,网站运营

15^# 大中小发表于 2008-11-10 11:01

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

能不能想拖到哪儿就哪儿，不用拖了后，放的位置是定的。。。

就是没有规则的拖动

空间1G/90

TOP

yoom

木匠的背篓

高级会员

帖子: 556
体力: 580
威望: 2
当前: 四川成都

专长 前端制作

16^# 大中小发表于 2008-11-10 11:55

我先膜拜！

不往后看

TOP