为了在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 );
}
* 事件处理类
* @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;
}
}
{
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 ;
}
}
{
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 >
< 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