我把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.removeSource=function(_element){ for (var i=0; i<Drag.source.length; i++){ if (Drag.source[i].element==_element){ Drag.source.splice (i,1); } } }
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)){ //var currObj = Drag.currentObj.cloneNode(true);
//Drag.removeSource(Drag.currentObj);
//Drag.addSource(currObj);
//Drag.currentObj = currObj;
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;
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";
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.removeSource=function(_element){
for (var i=0; i<Drag.source.length; i++){
if (Drag.source[i].element==_element){
Drag.source.splice (i,1);
}
}
}
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)){
//var currObj = Drag.currentObj.cloneNode(true);
//Drag.removeSource(Drag.currentObj);
//Drag.addSource(currObj);
//Drag.currentObj = currObj;
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;
}
}
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();
}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;
}
}
拖动:JKDrag ( 移动模块在页面中的位置)
http://jkisjk.spaces.live.com/blog/cns!758CACE25E89DD3B!358.entry
代码仅通过ie5.5+测试,仅作示意
----------<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.dragTable
{
background-color:white;
position:relative;
}.dragTableHeader
{
cursor:move;
background-color:#cccccc;
}
.dragTableHeaderDisabled
{
background-color:red;
}</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var dragTableHeader=null;
var tipDiv=null;function MouseDownToMove(obj){
if((event.button&1)==0) return;
sourceObj=obj.offsetParent;
sourceObj.style.zIndex=10;
sourceObj.mouseDownY=event.clientY;
sourceObj.mouseDownX=event.clientX;
beginMoving=true;
dragTableHeader=obj;
dragTableHeader.setCapture();
}
function MouseMoveToMove(obj){
if(!beginMoving) return;
sourceObj.style.top = (event.clientY-sourceObj.mouseDownY);
sourceObj.style.left = (event.clientX-sourceObj.mouseDownX);
setTipDivPosition();
}
function MouseUpToMove(obj){
if(!beginMoving) return;
dragTableHeader.releaseCapture();
sourceObj.style.top=0;
sourceObj.style.left=0;
sourceObj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",20);
}
function MouseOverFun(obj){
if (tipDiv==null) {
tipDiv=document.createElement("<div style='position:absolute;z-index:10;line-height:2px;height:2px;color:red;'>");
tipDiv.innerText="------";
}
obj.insertAdjacentElement("beforeBegin",tipDiv);
if(obj==sourceObj) return;
}
function swapFun(){
if(sourceObj!=null) {
if(!sourceObj.hasBeenMoved) {
sourceObj.hasBeenMoved=1;
var disabledObj=sourceObj.cloneNode(true);
disabledObj.rows[0].cells[0].onmousedown=null;
disabledObj.rows[0].cells[0].className="dragTableHeaderDisabled";
disabledObj.all.tableName.disabled=true;
sourceObj.insertAdjacentElement("afterEnd",disabledObj);
}
tipDiv.insertAdjacentElement("afterEnd",sourceObj);
if(true) {
var tableNameObjs=document.getElementsByName("tableName");
var originalIndex=-3;
var currentIndex=-3;;
for(var i=0;i<tableNameObjs.length;i++)
{
if(tableNameObjs[i].parentElement.offsetParent==sourceObj){
currentIndex=i;
continue;
}
if(tableNameObjs[i].value==sourceObj.all.tableName.value){
originalIndex=i;
}
}
if(Math.abs(originalIndex-currentIndex)==1){
tableNameObjs[originalIndex].parentElement.offsetParent.removeNode(true);
sourceObj.hasBeenMoved=0;
}
}
}
sourceObj=null;
}
function setTipDivPosition(){
var allTables=document.getElementsByTagName("table");
for(var i=0;i<allTables.length;i++) {
if(allTables[i]==sourceObj) continue;
if(allTables[i].className=="dragTable" && isMouseInBox(allTables[i])){
allTables[i].insertAdjacentElement("beforeBegin",tipDiv);
return;
}
}
sourceObj.insertAdjacentElement("beforeBegin",tipDiv);
}
function isMouseInBox(obj){
var point1=new Array(event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop);
var point2=getObjPosition(obj);
return( (point1[0]>=point2[0]) && point1[1]>=point2[1] && point1[0]-point2[0]<=obj.offsetWidth && point1[1]-point2[1]<=obj.offsetHeight )
}
function getObjPosition(obj){
var point=new Array(0,0);
while(obj!=document.body){
point[0]+=obj.offsetLeft;
point[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return point;
}</script>
<script defer>
document.onmousemove=MouseMoveToMove;
document.onmouseup=MouseUpToMove;
</script>
</head><body><table border="1" width="100%" height="58">
<tr>
<td width="50%" valign="top" >
<input type=hidden name="tableName" value="空间-------1">
<table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
<tr >
<td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格1">表格1</td>
<td >其它内容</td>
</tr>
</table>
<table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
<tr >
<td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格2">表格2</td>
<td >其它内容</td>
</tr>
</table>
<table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td > </td></tr></table>
</td>
<td width="50%" valign="top" >
<input type=hidden name="tableName" value="空间-------2">
<table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
<tr >
<td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格3">表格3</td>
<td >其它内容</td>
</tr>
</table>
<table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
<tr >
<td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格4">表格4</td>
<td >其它内容</td>
</tr>
</table>
<table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td > </td></tr></table>
</td>
</tr>
</table>
<table border="1" width="100%" height="58">
<tr>
<td width="50%" valign="top" >
<input type=hidden name="tableName" value="空间-------3">
<table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
<tr >
<td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格5">表格5</td>
<td >其它内容</td>
</tr>
</table>
<table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
<tr >
<td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格6">表格6</td>
<td >其它内容</td>
</tr>
</table>
<table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td > </td></tr></table>
</td>
<td width="50%" valign="top" >
<input type=hidden name="tableName" value="空间-------4">
<table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
<tr >
<td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格7">表格7</td>
<td >其它内容</td>
</tr>
</table>
<table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
<tr >
<td class=dragTableHeader onmousedown='MouseDownToMove(this)' ><input type=hidden name="tableName" value="表格8">表格8</td>
<td >其它内容</td>
</tr>
</table>
<table width="100%" onmouseover="MouseOverFun(this);" class="dragTable" ><tr><td > </td></tr></table>
</td>
</tr>
</table><input type=button value="保存示例" onclick="saveFun()">
</body>
</html>
<script>
function saveFun()
{
var tableNameObjs=document.getElementsByName("tableName");
var tempStr="";
for(var i=0;i<tableNameObjs.length;i++)
{
if(!tableNameObjs[i].disabled)tempStr += "\n"+tableNameObjs[i].value;
}
alert(tempStr);}
</script>
如果你想支持ff,那就别看JK的代码
因为JK的代码不能给帮助,反而会误导你。