请教DIV移动的特殊问题

这个代码是我从网上载下来稍微改动一下，应该能符合你的要求！
<SCRIPT>
var mouseObj=null;
 var pX
 var pY
 document.onmousemove=divMove;
 document.onmouseup=divUp;
 function m(c_Obj)
 { 
   mouseObj=document.all(c_Obj);
   pX=mouseObj.style.pixelLeft-event.x;
   pY=mouseObj.style.pixelTop-event.y;
 } 
 function divMove()
 {
   if(mouseObj)
   {
     mouseObj.style.left=pX+event.x;
     mouseObj.style.top=pY+event.y;
     event.returnValue=false;
    }
  } 
 function divUp()
 {    
  if(mouseObj)
   {
     mouseObj=null;
   } 
  }
</SCRIPT>
<STYLE>
.up {
 BORDER-RIGHT: #711200 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: white 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 9pt; PADDING-BOTTOM: 1px; BORDER-LEFT: white 1px solid; COLOR: #ff0000; PADDING-TOP: 1px; BORDER-BOTTOM: #711200 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #eadfd0
}
.down {
 BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #711200 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #711200 1px solid; CURSOR: hand; COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #336699
}</STYLE>
<DIV class=up id=hello 
style="; LEFT: expression((document.body.clientWidth-80)/2); WIDTH: 80px; POSITION: absolute; ; TOP: expression((document.body.clientHeight-120)/2); HEIGHT: 120px">
<DIV  class=down onmousedown='m("hello")'>-+酷-网-站+-</DIV>
<DIV style="PADDING-LEFT: 5pt"><A href="http://www.sina.com/" 
target=_blank>新浪网</A></DIV>
</DIV>

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
    <head> 
    <style> 
    .dragAble {position:relative;cursor:move;} 
    </style> 
    <script language="javascript"> 
    <!-- 
    var ie=document.all; 
    var nn6=document.getElementById&&!document.all; 
    var isdrag=false; 
    var y,x; 
    var oDragObj; function moveMouse(e) { 
     if (isdrag) { 
        oDragObj.style.top  =  (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
        oDragObj.style.left  =  (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
     } 
    } function initDrag(e) { 
     var oDragHandle = nn6 ? e.target : event.srcElement; 
     if (oDragHandle.className=="dragAble") { 
        isdrag = true; 
        oDragObj = oDragHandle.parentNode;
        nTY = parseInt(oDragObj.style.top+0); 
        y = nn6 ? e.clientY : event.clientY; 
        nTX = parseInt(oDragObj.style.left+0); 
        x = nn6 ? e.clientX : event.clientX; 
        document.onmousemove=moveMouse;  
     } 
    } 
    document.onmousedown=initDrag; 
    document.onmouseup=new Function("isdrag=false"); 
    //--> 
    </script> 
    </head> 
    <body> 
    <div style="position:absolute;left:0px;top:0px;width:50px;height:50px;background-color:#fff0f0;border:solid 1px #121212;">
    <h4 class="dragAble">DragMe<h4>
    </div>
    </body> </html> 
      

  2.   

    参见：
    JKHtml\JKDrag\SimpleDrag.htm
    下载地址：
    http://download.csdn.net/source/276201
      

  3.   

    这个也是很好用的，
    <script>   
      var   ms=0;   
      function   did(obj)
      {   
         ms=obj;   
         event.srcElement.setCapture();   
         x=document.all(ms).style.pixelLeft-event.x;   
         y=document.all(ms).style.pixelTop-event.y;   
      }   
        
      function   document.onmousemove()
      {   
        if(ms)
        {   
         document.all(ms).style.pixelLeft=x+event.x;   
         document.all(ms).style.pixelTop=y+event.y;   
        }   
      }   
        
      function   document.onmouseup()
      {   
        if(ms)
        {   
         event.srcElement.releaseCapture();   
         ms=0;   
        }   
      }   
      </script>   
      <div   id=a1   style=position:absolute>   
      <!--div   id=a2   onmousedown=did('a1')>&Otilde;&acirc;&Agrave;&iuml;&Ecirc;&Ccedil;a2</div>   
      <div   id=a3>   &Otilde;&acirc;&Ecirc;&Ccedil;a3</div-->   
       <div   id=a2  style="cursor: hand; background-color: palegoldenrod"   onmousedown=did('a1')>这也是第一个DIV点击这可以拖动！</div>   
      <div   id=a3>   这是第二个DIV了<br>点击这个DIV就不好用了</div> 
      </div>