请教：拖动div是否必须设定此div的position为absolute

Question

我现在有一排div，我想把某一个div拖开的话，后面的div占据它的位置怎么实现呢？？？？

Answer 1

试下这个，根据JK的移动元素改的，拖动span
<script language=javascript>
flag=falsefunction MouseDownToMove(obj)
{
flag=true
dragTag=obj.id
obj.style.zIndex=1;
x=event.clientX
y=event.clientY
obj.setCapture();
}
function MouseMoveToMove(obj)
{
if((flag)&&(dragTag==obj.id))
{
obj.style.left=(event.clientX-x)
obj.style.top=(event.clientY-y)
}
}
function MouseUpToMove(obj)
{
obj.releaseCapture();
obj.style.zIndex=0;
obj.style.left=0;
obj.style.top=0;
flag=false
dragTag=""
document.getElementById("tr1").appendChild(obj.parentNode)
obj.style.position="relative"
}
</script>
<table>
<tr id="tr1">
<td>
<span id="span1" style="backGround-color:red;position:relative" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'  >第一个</span>
</td>
<td>
<span id="span2" style="backGround-color:green;position:relative" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'  >第二个</span>
</td>
<td>
<span id="span3" style="backGround-color:blue;position:relative" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'  >第三个</span>
</td>
<td>
<span id="span4" style="backGround-color:black;position:relative" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' >第四个</span>
</td>
</tr>
</table>

Answer 2

我试试，非常感谢！！！！！
再请教一下，我在拖动div的时候，当鼠标隔着div放在一个span上时，我想改变span的样式，
但是只能是mouseenter这个span，不能用鼠标和span的位置关系来实现，但是鼠标没有办法透过这个div，我想使鼠标透过div，不知能不能实现？？？？？

Answer 3

设置对象的zIndex属性行不同啊？？？？这是我写的帮忙看看，谢了
<script>
<!--
function setCookie(top,left)
{
    document.cookie="top="+top;
    document.cookie="left="+left;
}
function getCookie(name)
{
    var mycookie=document.cookie;
    var start=mycookie.indexOf(name+"=");
    if (start!=-1) 
    {
        start=mycookie.indexOf("=",start)+1;
        var end=mycookie.indexOf(";",start);
        if (end==-1)
        end=mycookie.length;
        var value=unescape(mycookie.substring(start,end));
        if (value!=null) 
        {
            var obj=document.getElementById("TheDiv");
            if (name=="top")
            obj.style.top=value;
            if (name="left")
            obj.style.left=value;
        }
    }
}
function moveobj(obj)
{
    var x=event.clientX;
    var y=event.clientY;
    obj.setCapture();
    function obj.onmousemove()
    {
        if(obj)
        {
            var nx=event.clientX;
            var ny=event.clientY;
            window.status="X="+nx+"Y="+ny;
            obj.style.posLeft+=nx-x;
            obj.style.posTop+=ny-y;
            x=nx;
            y=ny;
        }
    }
    function obj.onmouseup()
    {
        var stop=0;
        obj.releaseCapture();
        var nowtop=obj.style.top;
        var nowleft=obj.style.left;
        setCookie(nowtop,nowleft);
        obj=false;
    }
}
function setspan()
{
    span1.style.background="red";
}
//-->
</SCRIPT>
<div id="TheDiv" onmousedown="moveobj(this)" style=" float:left; position:absolute;width:200px;height:200px;background:#355ddd;border:1px #356999 solid;cursor:move; z-index:0;"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<span id="span1" style="width:100px;height:100px;background:#355ddd; z-index:1;" onmouseover="setspan();">sjdfkdsjfkdfj</span>