我也来开一新贴,喜欢挑战高难度的朋友来看看啊(比google拖动还复杂的问题)

我昨天开的那贴用的就是不同的class,但是今天这些问题都是在拖动的时候处理的,主要是条件比较多,在拖动的过程中,要分开处理,没能解决这些问题了.头都大了

尽量不要在拖动中处理,这样就算你做到了也会慢死,onmouseover 事件不拖动中会不停触发, 尽量在拖动前就计算好一些数据,如那四个框的位置,属性等等信息,可以先用一个数组保存好, 拖动时就对比数组中的信息

sorry，从来不管其它的浏览器，
有负重望，惭愧中

这样会不会很费资源的, 要么就在鼠标松开后判断,如果不属于这个框,那么回到原来的位置,这样就要取得每次拖动后的坐标,也蛮麻烦的.
用数组记录的话,好象可行.这样就要在每个可拖动的小框上做标记位了.
onmouseover事件可以设置成遇到div时可移动,这样就避免了鼠标移动中不断激发的事件了

靠,还是不行啊,介绍下我的代码的主要来源吧
http://www.cnblogs.com/zxub/archive/2006/06/28/438152.html?Pending=true#Post
我这个模板的主要思路就是从这里来的,而且在FF下也能使用,就是代码多了点,呵呵
主要就是在他的基础上来改动的,希望有谁改好的,发上来吼一句了.
偶代表发贴的兄弟谢谢了!呵呵

第一次为ff写东东，
ff里的event不好使，
以下，跟event有关的代码应该还可以改进，（代码后面注释有//的）;
另外，ff没有setCapture/releaseCapture，效果差了好多.

<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;
}
.tipDivCss{
position:absolute;
z-index:10;
line-height:2px;
height:2px;
color:red;
}
</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var dragTableHeader=null;
var tipDiv=null;function MouseDownToMove(obj,mouseEvent){
if(mouseEvent==null) mouseEvent=window.event ;
sourceObj=obj.offsetParent;
sourceObj.style.zIndex=10;
sourceObj.mouseDownY=mouseEvent.clientY;
sourceObj.mouseDownX=mouseEvent.clientX;
beginMoving=true;
dragTableHeader=obj;
if(dragTableHeader.setCapture)dragTableHeader.setCapture();
}
function MouseMoveToMove(obj,mouseEvent){ if(!beginMoving) return;
if(mouseEvent.clientY!=null){
  sourceObj.style.top = mouseEvent.clientY-sourceObj.mouseDownY;
  sourceObj.style.left = mouseEvent.clientX-sourceObj.mouseDownX;
}
else{
  sourceObj.style.top = mouseEvent.clientY-sourceObj.mouseDownY;
  sourceObj.style.left = mouseEvent.clientX-sourceObj.mouseDownX;
}
setTipDivPosition(mouseEvent);
}
function MouseUpToMove(obj){
if(!beginMoving) return;
if(dragTableHeader.releaseCapture)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");
  tipDiv.className="tipDivCss";
  tipDiv.innerHTML="------";
}
obj.parentNode.insertBefore(tipDiv,obj);
if(obj==sourceObj) return;
}
function swapFun()
{
tipDiv.parentNode.insertBefore(sourceObj,tipDiv);
}function setTipDivPosition(mouseEvent){
if(mouseEvent==null) mouseEvent=window.event;
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],mouseEvent)){
   allTables[i].parentNode.insertBefore(tipDiv,allTables[i]);
   return;
  }
}
sourceObj.parentNode.insertBefore(tipDiv,sourceObj);
}
function isMouseInBox(obj,mouseEvent){
if(mouseEvent==null) mouseEvent=window.event;
var point1=new Array(mouseEvent.clientX+document.body.scrollLeft,mouseEvent.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 onmouseup="MouseUpToMove(this,event);" onmousemove="MouseMoveToMove(this,event)">
<table border="1" width="100%" height="58">
  <tr>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" id="tableName" value="空间-------1">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this,event)' ><input type=hidden name="tableName" id="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,event)' ><input type=hidden name="tableName" id="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" id="tableName" value="空间-------2">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this,event)' ><input type=hidden name="tableName" id="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,event)' ><input type=hidden name="tableName" id="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" id="tableName" value="空间-------3">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this,event)' ><input type=hidden name="tableName" id="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,event)' ><input type=hidden name="tableName" id="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" id="tableName" value="空间-------4">
      <table border="1" width="100%" class="dragTable" onmouseover="MouseOverFun(this);">
        <tr >
          <td class=dragTableHeader onmousedown='MouseDownToMove(this,event)' ><input type=hidden name="tableName" id="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,event)' ><input type=hidden name="tableName" id="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>

另外，以下代码只根楼主有关
替换掉以上代码里的相应函数即可function swapFun() // this function is only for [email protected]
{
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";
sourceObj.parentNode.insertBefore(disabledObj,sourceObj); }
tipDiv.parentNode.insertBefore(sourceObj,tipDiv);
if(true) {
var tableNameObjs=document.getElementsByName("tableName");
var originalIndex=-3;
var currentIndex=-3;;
for(var i=0;i<tableNameObjs.length;i++)
{
if(tableNameObjs[i].parentNode.offsetParent==sourceObj){
currentIndex=i;
break;;
}
}
for(var i=0;i<tableNameObjs.length;i++){
if(i!=currentIndex && tableNameObjs[i].value==tableNameObjs[currentIndex].value){
originalIndex=i;
tableNameObjs[i].disabled=true;
}
}
if(Math.abs(originalIndex-currentIndex)==1){
var tempObj=tableNameObjs[originalIndex].parentNode.offsetParent;
tempObj.parentNode.removeChild(tempObj);
sourceObj.hasBeenMoved=0;
}
}
}
sourceObj=null;
}

你其实可以考虑采用RIA方面的服务程序。

http://www.makepower.com.cn/revival/
我写的代码，在IE可用。FF不行，代码不是很多！有需要的话。楼主自己参考一下！

我倒希望什么时候谁把HTML改一下,让它能支持UI脚本,浏览器负责解释,JS就退出舞台吧,在UI中很简单的东西到了JS中搞得这么复杂.郁闷

管理框，用户框和设定框之间的拖动还是没能处理好
<table>
        <tr>
            <td valign="top">
                <div id="menu" style="height: 417px; border: 1px solid black; padding: 5 5 5 5">
                    <table width="150px">
                        <tr>
                            <td valign="top">
                                <table width="100%" border="0">
                                    <tr>
                                        <td>
                                            -管理者設定</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="hidden" name="tableName" id="manager" value="manager" />
                                            <div id="t1" class="dragborder">
                                                <div id="t11" align="left" class="dragleft" style="display: none">
                                                    <input type="hidden" name="tableName" value="t101" />－test1</div>
                                                <div id="t12" align="left" class="dragleft">
                                                    <input type="hidden" name="tableName" value="t102" />－test2</div>
                                                <div id="t13" align="left" class="dragleft">
                                                    <input type="hidden" name="tableName" value="t103" />－test3</div>
</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            -用户設定Portlet</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input type="hidden" name="tableName" id="user" value="user" />
                                            <div id="t2" class="dragborder">
                                                <div id="t21" align="left" class="dragleft">
                                                    <input type="hidden" name="tableName" value="t201" />－test4</div>
                                                <div id="t22" align="left" class="dragleft">
                                                    <input type="hidden" name="tableName" value="t202" />－test5</div>
                                                <div id="t23" align="left" class="dragleft">
                                                    <input type="hidden" name="tableName" value="t203" />－test6</div>
                                                <div id="t24" align="left" class="dragleft">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
            <td>
                <table align="center">
                    <tr>
                        <td colspan="2">
                            <input type="hidden" name="tableName" value="--------t3" />
                            <div id="t3" class="dragbody">
                                <div id="t31" align="center" class="dragright">
                                    <input type="hidden" name="tableName" value="t31" />test7</div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="hidden" name="tableName" value="--------t4" />
                            <div id="t4" class="dragfoot">
                                <div id="t41" align="center" class="dragright">
                                    <input type="hidden" name="tableName" value="t401" />test8</div>
                            </div>
                        </td>
                        <td>
                            <input type="hidden" name="tableName" value="--------t5" />
                            <div id="t5" class="dragfoot">
                                <div id="t51" align="center" class="dragright">
                                    <input type="hidden" name="tableName" value="t501" />test9</div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

问题还是没消化掉，我发现网上流传最多的就是几个相同大小的框之间的拖动，大小不同的框的拖动几乎没有，而且框与框之间拖动的限制很少，都可以自由随意拖动。我提出来的管理框和设定框之间有条件的拖动，这种模式也很少。
下面是drag.js的部分代码：
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;
        }
    }
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();
}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;
}
}

管理框和设定框之间有条件的拖动还是没处理好，主要是拖动的js都放一块了，不太好判断，要么就全是一个模式，要么就一个都不能实现，唉，这个问题好难受啊
感谢JK_10000(JK)，starwu(星沉海底)（虽然你的代码不能下载），以及各位踊跃回帖的兄弟们。
晚上不能上网，对不起各位继续奋斗的兄弟了。
如果没什么意外的话，明天下午结贴。
这个贴的问题没处理好，周末好好弄弄。

代码作了部分改变，去了几句无用的代码，主要是tipdiv的----尽管这个示例对楼主没有用：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.jkDrag_dragObj
{
background-color:white;
position:relative;
}
.jkDrag_ObjHeader
{
cursor:move;
background-color:#cccccc;
}
.jkDrag_ObjHeaderDisabled
{
background-color:red;
}
.jkDrag_tipDivCss{
position:absolute;
z-index:10;
line-height:2px;
height:2px;
color:red;
}
</style>
<script language="javascript">
var jkDrag_isMoving=false;
var jkDrag_sourceObj=null;
var jkDrag_ObjHeader=null;
var jkDrag_tipDiv=null;function jkDrag_mousedown(mouseEvent,obj){
if(mouseEvent==null) mouseEvent=window.event ;
jkDrag_sourceObj=obj.offsetParent;
jkDrag_sourceObj.style.zIndex=10;
jkDrag_sourceObj.mouseDownY=mouseEvent.clientY;
jkDrag_sourceObj.mouseDownX=mouseEvent.clientX;
jkDrag_isMoving=true;
jkDrag_ObjHeader=obj;
if(jkDrag_ObjHeader.setCapture)jkDrag_ObjHeader.setCapture();
setjkDrag_tipDivPosition(mouseEvent);
}
function jkDrag_mousemove(mouseEvent,obj){
if(mouseEvent==null) mouseEvent=window.event ;
if(!jkDrag_isMoving) return;
if(mouseEvent.clientY!=null){
  jkDrag_sourceObj.style.top = mouseEvent.clientY-jkDrag_sourceObj.mouseDownY;
  jkDrag_sourceObj.style.left = mouseEvent.clientX-jkDrag_sourceObj.mouseDownX;
}
else{
  jkDrag_sourceObj.style.top = mouseEvent.clientY-jkDrag_sourceObj.mouseDownY;
  jkDrag_sourceObj.style.left = mouseEvent.clientX-jkDrag_sourceObj.mouseDownX;
}
setjkDrag_tipDivPosition(mouseEvent);
}
function jkDrag_mouseup(mouseEvent,obj){
if(!jkDrag_isMoving) return;
if(jkDrag_ObjHeader.releaseCapture)jkDrag_ObjHeader.releaseCapture();
jkDrag_sourceObj.style.top=0;
jkDrag_sourceObj.style.left=0;
jkDrag_sourceObj.style.zIndex=0;
jkDrag_isMoving=false;
window.setTimeout("jkDrag_swapFun()",20);
}
function jkDrag_swapFun()
{
jkDrag_tipDiv.parentNode.insertBefore(jkDrag_sourceObj,jkDrag_tipDiv);
jkDrag_tipDiv.style.display="none";
}function setjkDrag_tipDivPosition(mouseEvent){
if(mouseEvent==null) mouseEvent=window.event;
if (jkDrag_tipDiv==null) {
  jkDrag_tipDiv=document.createElement("div");
  jkDrag_tipDiv.className="jkDrag_tipDivCss";
  jkDrag_tipDiv.innerHTML="------";
}
jkDrag_tipDiv.style.display="";
var allDragObjs=document.getElementsByTagName("table");//to get dragObjs.(for example for:层7，层8, they are DIV,not TABLE ) :
for(var i=0;i<allDragObjs.length;i++) {
  if(allDragObjs[i]==jkDrag_sourceObj) continue;
  if((/jkDrag_dragObj/).test(allDragObjs[i].className) && isMouseInBox(allDragObjs[i],mouseEvent)){
   allDragObjs[i].parentNode.insertBefore(jkDrag_tipDiv,allDragObjs[i]);
   return;
  }
}
jkDrag_sourceObj.parentNode.insertBefore(jkDrag_tipDiv,jkDrag_sourceObj);
}
function isMouseInBox(obj,mouseEvent){
if(mouseEvent==null) mouseEvent=window.event;
var point1=new Array(mouseEvent.clientX+document.body.scrollLeft,mouseEvent.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="true" >
document.onmousemove=jkDrag_mousemove;
document.onmouseup=jkDrag_mouseup; </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="jkDrag_dragObj" >
        <tr >
          <td class=jkDrag_ObjHeader onmousedown='jkDrag_mousedown(event,this)' ><input type=hidden name="tableName" value="表格1">表格1</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="jkDrag_dragObj" >
        <tr >
          <td class=jkDrag_ObjHeader onmousedown='jkDrag_mousedown(event,this)' ><input type=hidden name="tableName" value="表格2">表格2</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%"  class="jkDrag_dragObj" ><tr><td > </td></tr></table>
    </td>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间----2">
      <table border="1" width="100%" class="jkDrag_dragObj" >
        <tr >
          <td class=jkDrag_ObjHeader onmousedown='jkDrag_mousedown(event,this)' ><input type=hidden name="tableName" value="表格3">表格3</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="jkDrag_dragObj" >
        <tr >
          <td class=jkDrag_ObjHeader onmousedown='jkDrag_mousedown(event,this)' ><input type=hidden name="tableName" value="表格4">表格4</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%"  class="jkDrag_dragObj" ><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="jkDrag_dragObj" >
        <tr >
          <td class=jkDrag_ObjHeader onmousedown='jkDrag_mousedown(event,this)' ><input type=hidden name="tableName" value="表格5">表格5</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table border="1" width="100%" class="jkDrag_dragObj" >
        <tr >
          <td class=jkDrag_ObjHeader onmousedown='jkDrag_mousedown(event,this)' ><input type=hidden name="tableName" value="表格6">表格6</td>
          <td >其它内容</td>
        </tr>
      </table>
      <table width="100%"  class="jkDrag_dragObj" ><tr><td > </td></tr></table>
    </td>
    <td width="50%" valign="top" >
    <input type=hidden name="tableName" value="空间----4">

      <div class="jkDrag_dragObj" style="margin-top:2px;" id="divTestForDrag7">
          <div class=jkDrag_ObjHeader onmousedown='jkDrag_mousedown(event,this)' style="width:100%;"><input type=hidden name="tableName" value="层7">层7</div>
          <div >(如果移动的对象不是table，<br>需要修改这句代码：<br>var allDragObjs=...)</div>
      </div>
      <div class="jkDrag_dragObj" style="margin-top:2px;" id="divTestForDrag8">
          <div class=jkDrag_ObjHeader onmousedown='jkDrag_mousedown(event,this)' style="width:100%;"><input type=hidden name="tableName" value="层8">层8</div>
          <div >其它内容</div>
      </div>
      <table width="100%"  class="jkDrag_dragObj" ><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>

调试易

我也来开一新贴,喜欢挑战高难度的朋友来看看啊(比google拖动还复杂的问题)

解决方案 »