Div的drag-drop实践结果【原创】

　　看了那些个框架里关于拖曳方面的例子，一看代码，昏倒，乱得很，有的又只支持IE，ff下根本没用，郁闷之下，决定自己写一个。
　　为了在ff下能用，花了点时间，代码如下：
　　event.js：
/**
* 事件处理类
* @author zxub 2006-06-21
*/
var Event=new function()
{
this.element=function(_event)
{
return _event.target || _event.srcElement;
}

this.pointerX=function(_event)
{
return _event.pageX || (_event.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft));
}

this.pointerY=function(_event)
{
return _event.pageY || (_event.clientY+(document.documentElement.scrollTop || document.body.scrollTop));
}

this.isLeftClick=function(_event)
{
return (((_event.which) && (_event.which==1)) || ((_event.button) && (_event.button==1)));
}

this.observers=null;

this.alreadyObserve=function(element,name,observer,useCapture)
{
for (var i=0; i<Event.observers.length; i++)
{
if (Event.observers[i][0]==element && Event.observers[i][1]==name && Event.observers[i][2]==observer)
{
return true;
}
}
return false;
}

this.unReg=function(element,name,observer,useCapture)
{
for (var i=0; i<Event.observers.length; i++)
{
if (Event.observers[i][0]==element && Event.observers[i][1]==name && Event.observers[i][2]==observer)
{
Event.observers[i][0]=null;
Event.observers.splice(i,1);
break;
}
}
}

/**
* 防止事件传播，进行中止
*/
this.stopEvent=function(_event)
{
if (_event.preventDefault)
{
_event.preventDefault();
_event.stopPropagation();
}
else
{
_event.returnValue = false;
_event.cancelBubble = true;
}
}

/**
* 增加事件处理
* 注意，对于同一个Element,IE和Firefox的处理顺序是相反的，IE用栈的形式，后注册的先执行，而Firefox用队列的形式，先注册先执行
* 至于useCapture，是当element存在包含关系，事件的处理顺序
* 处理顺序有2种，capturing和bubbling
* capturing是从外向内，而bubbling是从内向外
* IE只支持bubbling，所有useCapture是没有意义的
* Firefox中，2种都支持，useCapture为false的时候为bubbling，true为capturing，推荐用bubbling
* 默认useCapture为false
*/
this.observe=function(element, name, observer, useCapture)
{
if (typeof(element)=="string")
{
element=document.getElementById(element);
}
useCapture = useCapture || false;
if (this.observers==null)
{
this.observers=new Array();
}
//检查是否注册了同样的事件处理
if (Event.alreadyObserve(element, name, observer, useCapture)) return;
if (element.addEventListener) //firefox
{
element.addEventListener(name, observer, useCapture);
}
else if (element.attachEvent) //IE
{
element.attachEvent("on"+name, observer);
}
this.observers.push([element, name, observer, useCapture]);
}

this.stopObserving=function(element, name, observer, useCapture)
{
if (typeof(element)=="string")
{
element=document.getElementById(element);
}
useCapture = useCapture || false;

if (element.removeEventListener)
{
element.removeEventListener(name, observer, useCapture);
}
else if (element.detachEvent)
{
element.detachEvent("on"+name, observer);
}
Event.unReg(element, name, observer, useCapture);
}

this.clearObservers=function()
{
if (Event.observers==null) return;
for (var i=0;i<Event.observers.length; i++)
{
Event.stopObserving.apply(this, Event.observers[i]);
Event.observers[i][0] = null;//释放对element的引用
}
Event.observers = null;
}
}

if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
Event.observe(window,'onunload',Event.clearObservers,false);
}

　　position.js：

var Position=new function()
{
this.getPosition=function(element)
{
if (element==undefined || element==null || element=="") return new Position.instance(0,0,0,0);
var offsetTop=element.offsetTop;
var offsetLeft=element.offsetLeft;
var offsetWidth=element.offsetWidth;
var offsetHeight=element.offsetHeight;
while (element=element.offsetParent)
{
if (element.style.position=='absolute' || element.style.position=='relative' || (element.style.overflow!='visible' && element.style.overflow!=''))
{
break;
}
offsetTop+=element.offsetTop;
offsetLeft+=element.offsetLeft;
}
return new Position.instance(offsetTop,offsetLeft,offsetWidth,offsetHeight);
}

this.inside=function(_source,_target)
{
var _tPosition=Position.getPosition(_target);
var _sPosition=Position.getPosition(_source);
return (_sPosition.minX>=_tPosition.minX && _sPosition.maxX<=_tPosition.maxX && _sPosition.minY>=_tPosition.minY && _sPosition.maxY<=_tPosition.maxY);
}

this.outside=function(_source,_target)
{
var _tPosition=Position.getPosition(_target);
var _sPosition=Position.getPosition(_source);
return (_sPosition.maxX<_tPosition.minX || _sPosition.minX>_tPosition.maxX || _sPosition.minY>_tPosition.maxY || _sPosition.maxY<_tPosition.minY);
}
}

Position.instance=function(_top,_left,_width,_height)
{
this.top=_top;
this.left=_left;
this.width=_width;
this.height=_height;
this.minX=this.left;
this.maxX=this.left+this.width;
this.minY=this.top;
this.maxY=this.top+this.height;
this.toString=function()
{
return "top:"+this.top+";left:"+this.left+";width:"+this.width+";height:"+this.height+";xRange:"+this.minX+"-"+this.maxX+";yRange:"+this.minY+"-"+this.maxY;
}
}

Position.direction=new function()
{
this.up=false;
this.down=false;
this.left=false;
this.rgiht=false;
this.lastX=0;
this.lastY=0;
this.setInitValue=function(_x,_y)
{
this.lastX=_x;
this.lastY=_y;
}

this.setDirection=function(_cX,_cY)
{
if (_cX==undefined) _cX=Event.pointerX(event);
if (_cY==undefined) _cY=Event.pointerY(event);
this.up=(_cY<this.lastY);
this.down=!this.up;
this.left=(_cX<this.lastX);
this.right=!this.left;
this.setInitValue(_cX,_cY);
}

this.toString=function()
{
return "up:"+this.up+";down:"+this.down+";left:"+this.left+";right:"+this.right;
}
}

　　drag.js：
var Drag=new function()
{
this.source=new Array();
this.target=new Array();

this.topDistance=0;
this.leftDistance=0;

this.currentObj=null;

this.currentContainer=null;

this.isDragging=false;

this.addSource=function()
{
for (var i = 0; i < arguments.length; i++)
{
var _element = arguments[i];
if (typeof(_element)=="string")
{
_element=document.getElementById(_element);
}
Drag.source.push(new Drag.sourceObj(_element));
}
}

this.hasSource=function(_element)
{
for (var i=0; i<Drag.source.length; i++)
{
if (Drag.source[i].element==_element)
{
return true;
}
}
return false;
}

this.addTarget=function(_element)
{
for (var i = 0; i < arguments.length; i++)
{
var _element = arguments[i];
if (typeof(_element)=="string")
{
_element=document.getElementById(_element);
}
Drag.target.push(new Drag.targetObj(_element));
}
}

this.hasTarget=function(_element)
{
for (var i=0; i<Drag.target.length; i++)
{
if (Drag.target[i].element==_element)
{
return true;
}
}
return false;
}

this.start=function(event)
{
if (!Event.isLeftClick(event)) return;
Drag.currentObj=Event.element(event);
if (Drag.hasSource(Drag.currentObj))
{
Drag.currentObj.style.cursor="move";
var p=Position.getPosition(Drag.currentObj);
var x=Event.pointerX(event);
var y=Event.pointerY(event);
Position.direction.setInitValue(x,y);
Drag.topDistance=y-p.top;
Drag.leftDistance=x-p.left;

DashedDiv.div.style.width=p.width;
DashedDiv.div.style.height=p.height;
DashedDiv.div.style.display="";

Drag.currentObj.parentNode.insertBefore(DashedDiv.div,Drag.currentObj);

Drag.currentObj.style.top=p.top+5;
Drag.currentObj.style.left=p.left+5;
Drag.currentObj.style.position="absolute";

document.body.appendChild(Drag.currentObj);

Drag.isDragging=true;

Event.observe(document,"mousemove",Drag.drag);
Event.observe(document,"mouseup",Drag.end);
}
else
{
Drag.currentObj=null;
}
}

this.drag=function(event)
{
if (!Event.isLeftClick(event) || !Drag.isDragging || Drag.currentObj==null) return;

var x=Event.pointerX(event);
var y=Event.pointerY(event);
Position.direction.setDirection(x,y);

Drag.currentObj.style.top=y-Drag.topDistance;
Drag.currentObj.style.left=x-Drag.leftDistance;
if (Drag.currentContainer==null)
{
for (var i=0;i<Drag.target.length;i++)
{
if (Position.inside(Drag.currentObj,Drag.target[i].element))
{
Drag.currentContainer=Drag.target[i].element;
Drag.setDashedDivPosition();
break;
}
}
}
else
{
if (Position.outside(Drag.currentObj,Drag.currentContainer))
{
Drag.currentContainer=null;
}
else
{
Drag.setDashedDivPosition();
}
}
}

this.end=function(event)
{
if (!Event.isLeftClick(event)) return;
if (Drag.currentObj!=null)
{
DashedDiv.div.parentNode.insertBefore(Drag.currentObj,DashedDiv.div);
DashedDiv.div.style.display="none";

Drag.currentObj.style.position="relative";
Drag.currentObj.style.cursor="default";

Drag.currentObj.style.top=0;
Drag.currentObj.style.left=0;

Drag.currentObj=null;
Drag.currentContainer=null;
Drag.topDistance=0;
Drag.leftDistance=0;
this.isDragging=false;

Position.direction.setInitValue(0,0);
}
//发送请求保存页面
}

this.setDashedDivPosition=function()
{
if (Position.direction.down)
{
if (DashedDiv.div.parentNode!=Drag.currentContainer)
{
Drag.currentContainer.insertBefore(DashedDiv.div,Drag.currentContainer.firstChild)
return;
}
var cp=Position.getPosition(Drag.currentObj);
var nextNode=Drag.handler.getNextNode(DashedDiv.div);
var p=Position.getPosition(nextNode);
var node=null;
while (nextNode!=null && cp.minY>p.minY+2)
{
node=nextNode;
nextNode=Drag.handler.getNextNode(nextNode);
p=Position.getPosition(nextNode);
}
if (node!=null)
{
if (node.nextSibling)
{
node.parentNode.insertBefore(DashedDiv.div,node.nextSibling);
}
else
{
node.parentNode.appendChild(DashedDiv.div);
}
}
}
else if (Position.direction.up)
{
if (DashedDiv.div.parentNode!=Drag.currentContainer)
{
Drag.currentContainer.appendChild(DashedDiv.div);
return;
}
var cp=Position.getPosition(Drag.currentObj);
var previousNode=Drag.handler.getPreviousNode(DashedDiv.div);
var p=Position.getPosition(previousNode);
var node=null;
while (previousNode!=null && cp.minY<p.minY-2)
{
node=previousNode;
previousNode=Drag.handler.getPreviousNode(previousNode);
p=Position.getPosition(previousNode);
}
if (node!=null)
{
node.parentNode.insertBefore(DashedDiv.div,node);
}
}
}
}

Drag.sourceObj=function(_element)
{
this.element=_element;
Event.observe(this.element,"mousedown",Drag.start);
}

Drag.targetObj=function(_element)
{
this.element=_element;
}

var DashedDiv=new function()
{
this.div=null;
this.init=function()
{
if (this.div==null)
{
this.div=document.createElement("div");
this.div.id="dashed";
this.div.style.cssText="border:1px dashed red;position:relative;cursor:move;filter:alpha(opacity=60);-moz-opacity:0.6;display:none";
document.body.appendChild(this.div);
}
}
this.init();
}

//为不支持swapNode的浏览添加方法
if (window.Node)
{
Node.prototype.swapNode=function(node)//由于在ff下测试出了错，所以没用
{
var nextSibling=this.nextSibling;
var parentNode=this.parentNode;
node.parentNode.replaceChild(this,node);
parentNode.insertBefore(node,nextSibling);
}
}

Drag.handler=new function()
{
this.swap=function(_node1,_node2)
{
_node1.swapNode(_node2);
}

this.getNextNode=function(_node)
{
var sibling = _node.nextSibling;
while (sibling != null)
{
if (sibling.nodeName==_node.nodeName) return sibling;
sibling = sibling.nextSibling;
}
return null;
}

this.getPreviousNode=function(_node)
{
var sibling = _node.previousSibling;
while (sibling != null)
{
if (sibling.nodeName==_node.nodeName) return sibling;
sibling = sibling.previousSibling;
}
return null;
}
}

　　测试页面：
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body,tr,td { font-size: 12px;}
div {margin:5 5 5 5}
-->
</style>
</head>
<body>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="position.js"></script>
<script type="text/javascript" src="drag.js"></script>
<div id="t1" style="width:200px;height:50px;border:1px solid black">1</div>
<div id="t2" style="width:200px;height:100px;border:1px solid black">2</div>
<div id="t3" style="width:500px;height:300px;border:1px solid black;padding:5 5 5 5">
<div id="t5" style="width:200px;height:50px;border:1px solid black">5</div>
<div id="t6" style="width:200px;height:50px;border:1px solid black">6</div>
</div>
<div id="t4" style="width:500px;height:200px;border:1px solid black;padding:5 5 5 5"></div>
<div id="info"></div>
<script type="text/javascript">
Drag.addSource("t1","t2","t5","t6");
Drag.addTarget("t3","t4");
</script>
</body>
</html>

　　关于位置保存，以后再加上来。
　　源码下载： drag.rar