再问拖拽问题，谢谢各路高手的指教

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.removableObj
{
height:25;position:relative;
}
</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var objectObj=null;
var objectObj2=null;
function MouseDownToMove(obj){event.cancelBubble=true;
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
sourceObj=obj;
objectObj=null;
}function MouseMoveToMove(obj){
event.cancelBubble=true;
    if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
event.cancelBubble=true;
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",20);
}function MouseOverFun(obj)
{
event.cancelBubble=true;
if(obj==sourceObj) return false;
objectObj=obj;
}function MouseOverFun2(obj)
{
event.cancelBubble=true;
objectObj2=obj;
}function swapFun()
{
if(sourceObj==null || objectObj==null) return false;
if(sourceObj.tagName!=objectObj.tagName)return false;
if(sourceObj!=null && objectObj!=null) objectObj.insertAdjacentElement("beforeBegin",sourceObj);
else if(sourceObj!=null && objectObj2!=null) objectObj2.insertAdjacentElement("beforeEnd",sourceObj);
sourceObj=null;
objectObj=null;
objectObj2=null;
}
</script>
</head><body><table border="1" width="100%" height="58">
  <tr>
    <td width="34%" valign="top" height="46" onmouseover="MouseOverFun2(this);" >
      <table border="1" width="100%" bgcolor="#99CCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
        <tr>
          <td>
  <table border="1" width="100%" bgcolor="#FF9966" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
        <tr>
          <td>
            <ul>
            <li style="background:red" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">aa</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">bb</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">cc</li>
            </ul>
          </td>
        </tr>
  </table>  
          </td>
        </tr>
      </table><table border="1" width="100%" bgcolor="#FFCCFF" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
        <tr>
          <td>
  <table border="1" width="100%" bgcolor="#FF9966" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
        <tr>
          <td>
            <ul>
            <li style="background:red" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">aa</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">bb</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">cc</li>
            </ul>
          </td>
        </tr>
  </table>  
          </td>
        </tr>
      </table>
  <table border="1" width="100%" bgcolor="#00CC99" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
        <tr>
          <td>
  <table border="1" width="100%" bgcolor="#FF9966" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
        <tr>
          <td>
            <ul>
            <li style="background:red" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">aa</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">bb</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">cc</li>
            </ul>
          </td>
        </tr>
  </table>  
          </td>
        </tr>
      </table>
      
    </td>
    <td width="32%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
  <table border="1" width="100%" bgcolor="#FF0000" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
        <tr>
          <td>
  <table border="1" width="100%" bgcolor="#FF9966" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
        <tr>
          <td>
            <ul>
            <li style="background:red" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">aa</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">bb</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">cc</li>
            </ul>
          </td>
        </tr>
  </table>  
          </td>
        </tr>
      </table>    </td>
    <td width="34%" valign="top" height="52" onmouseover="MouseOverFun2(this);" >
    
      <table width="100%" border="1" bgcolor="#FFFFCC" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >
        <tr>
          <td>
            <ul>
            <li style="background:red" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">7</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">8</li>
            <li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">9</li>
            </ul>
          </td>
        </tr>
     </table>
    
      </td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    可以为移动的对象显示目标位置的例子http://www.netvibes.com当移动到某个地方，它会出现红色的边框，显示其位置，如何做到的？
    被移动的物体的大小如何获取？另外，为什么我自己写的，移动表格内的表项时，为什么不能从上往下移动？
      

  2.   

    不能上移的原因
    if(sourceObj!=null && objectObj!=null) objectObj.insertAdjacentElement("beforeBegin",sourceObj);每次都是把移动的物体放在目标物体前面（也就是上面）
    那么当上面往下移的时候还是摆在下面的前面，所以看起来就是不能移动，
    可以试一下把beforeBegin改成beforeEnd，afterBegin,afterEnd等试试
    （至于怎样做才可以达到你的效果....就不是很清楚了...手边没参考资料~）