javascript拖拽，不用document的onmousemove,而用div的。

这里的code包括了拖动改变div的大小，没写全，所以代码会这么多，我看了网上的拖动code,他们都是用了document.onmousemove来处理，我这里直接用div.onmousemove来处理，为什么效果会不一样，拖动div时，div没跟鼠标同步。

解决方案 »

  1.   

    用div的有问题,当移动速度过快的时候,会出现拖不动的现象
      

  2.   

    zhaoxiaoyang(梅雪香@深圳) 
    是有这个问题，能讲讲为什么会出现这个问题吗？
      

  3.   

    <SCRIPT LANGUAGE="JavaScript">
    <!--function neverDragDivision(fObj) { with (this)
    {
    if (!fObj) return;
    this.bDraged = false;
    this.oDragOrig = fObj;
    oDragOrig.style.cursor = "move";
    oDragOrig.onmousedown = function()
    {
    var ofs = Offset(oDragOrig);
        oDragOrig.style.position = "absolute";
    oDragOrig.style.left = ofs.l;
    oDragOrig.style.top = ofs.t;
    oDragOrig.X = event.clientX - ofs.l;
    oDragOrig.Y = event.clientY - ofs.t;
    bDraged = true;
    };
    oDragOrig.onmousemove = function()
    {
    if (!bDraged) return;
        oDragOrig.setCapture();
    oDragOrig.style.left = event.clientX - oDragOrig.X;
    oDragOrig.style.top = event.clientY - oDragOrig.Y; };
    oDragOrig.onmouseup = function()
    {
    bDraged = false;
    oDragOrig.releaseCapture();
    };
    function Offset(e) {
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight;
    while(e=e.offsetParent) {
    t+=e.offsetTop;
    l+=e.offsetLeft;
    }
    return { t:t, l:l, w:w, h:h }
    };
    }};//-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <table>
    <tr>
    <td>
    <div class="myDiv">
    http://www.never-online.net
    <p>power by blueDestiny, never-online</p>
    </div>
    </td>
    <td>
    <div class="myDiv" style="width:450px">
    <p>never-online, Everlasting love for angela.</p>
    </div>
    </td>
    </tr>
    </table>
    <h4 class="copyright"> Power By blueDestiny, never-online, <a href="http://www.never-online.net" _fcksavedurl="http://www.never-online.net">http://www.never-online.net</a> </h4>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var aDivs = document.getElementsByTagName("DIV");
    for (var i=0; i<aDivs.length; i++) {
    new neverDragDivision(aDivs[i]);
    }
    //-->
    </SCRIPT>
    </BODY>
    </HTML>
      

  4.   

    <html><style>
      DIV {cursor: hand}
    </style><body style="font-family: verdana">
    <H2>Simple Drag and Resize Example</h2>
    <h4>Use alt-click to multi-select</h4><input type=button value="Moving, click to resize"
      onclick="toggleMoveResize(this); return false"><div moveable=true style="position: absolute;
                       top: 150px; left: 100px;
                       width: 100px; height: 100px;
                       background-color: red;
                         border: solid 2px black">
    Click and drag me
    </div><div moveable=true style="position: absolute;
                       top: 150px; left: 250px;
                       width: 100px; height: 100px;
                       background-color: blue;
                         border: solid 2px black">
    Click and drag me
    </div><script language="JavaScript">
    var activeElements = new Array();
    var activeElementCount = 0;var lTop, lLeft;
    var doMove = true;
    var doResize = false;function toggleMoveResize(e) {
      if (doMove) {
        doMove = false;
        doResize = true;
        e.value = "Resizing, Click to Move";
      } else {
        doMove = true;
        doResize = false;
        e.value = "Moving, Click to Resize";
      }
    }function mousedown() {
      var mp;  mp = findMoveable(window.event.srcElement);  if (!window.event.altKey) {
         for (i=0; i<activeElementCount; i++) {
            if (activeElements[i] != mp) {
              activeElements[i].style.borderWidth = "2px";
            }
         }
         if (mp) {
           activeElements[0] = mp;
           activeElementCount = 1;
           mp.style.borderWidth = "4px";
         } else {
           activeElementCount = 0;
         }
      } else {
         if (mp) {
           if (mp.style.borderWidth != "4px") {
             activeElements[activeElementCount] = mp;
             activeElementCount++;
             mp.style.borderWidth = "4px";
           }
         }
      }  window.status = activeElementCount;  lLeft = window.event.x;
      lTop = window.event.y;
    }document.onmousedown = mousedown;function mousemove() {
      var i, dLeft, dTop;  if (window.event.button == 1) {    sx = window.event.x;
        sy = window.event.y;    dLeft = sx - lLeft;
        dTop = sy - lTop;    for (i=0; i<activeElementCount; i++) {
          if (doMove)
            moveElement(activeElements[i], dLeft, dTop);
          if (doResize)
            resizeElement(activeElements[i], dLeft, dTop);
        }    lLeft = sx;
        lTop = sy;    return false;
      }}function moveElement(mp, dLeft, dTop) {
        var e
        e = mp;
        e.style.posTop += dTop;
        e.style.posLeft += dLeft;
    }function resizeElement(mp, dLeft, dTop) {
        var e;
        e = mp;
        e.style.posHeight += dTop;
        e.style.posWidth += dLeft;
    }function findMoveable(e) {
      if (e.moveable == 'true')
        return e;  if (e.tagName == "BODY")
        return null;  return findMoveable(e.parentElement);
    }function findDefinedMoveable(e) {
      if ((e.moveable == 'true') || (e.moveable == 'false'))
        return e;  if (e.tagName == "BODY")
        return null;  return findDefinedMoveable(e.parentElement);
    }function rfalse() {
      return false;
    }document.onmousemove = mousemove;
    document.onselectstart = rfalse;</script></body></html>
      

  5.   

    这还不是onmousemove吗，什么用div的。没setCapture()当然会这样