请给个能用鼠标拖动元素的例子吧

<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>

解决方案 »

  1.   

    <span style="position:absolute;width:200;height:200;background:red"
      onmousedown="MouseDown(this)" onmousemove="MouseMove()" onmouseup="MouseUp()">
      meizz</span>
    <script language=javascript>
    var Obj;
    function MouseDown(obj)
    {
      Obj=obj;
      Obj.setCapture();
      Obj.l=event.x-Obj.style.pixelLeft;
      Obj.t=event.y-Obj.style.pixelTop;
    }
    function MouseMove()
    {
      if(Obj!=null)
      {
        Obj.style.left = event.x-Obj.l;
        Obj.style.top = event.y-Obj.t;
      }
    }
    function MouseUp()
    {
      if(Obj!=null)
      {
        Obj.releaseCapture();
        Obj=null;
      }
    }
    </script>