Javascript简单实现可拖动的div

复制代码 代码如下:

  <html>

  <head>

  <script type="text/javascript">

  var x;

  var y;

  function $(id)

  {

  return document.getElementById(id)

  }

  function mousedown()

  {

  x=event.clientX-$("px").style.pixelLeft;

  y=event.clientY-$("px").style.pixelTop;

  $("px").style.border="2px solid red";

  $("px").onmousemove = mousemove;

  }

  function mouseup()

  {

  $("px").onmousemove = "";

  $("px").style.border="";

  }

  function mousemove()

  {

  $("px").style.pixelLeft=event.clientX-x;

  $("px").style.pixelTop=event.clientY-y;

  }

  </script>

  </head>

  <body>

  <div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;"

  onmousedown="mousedown()" onmouseup="mouseup()" >

  </div>

  </body>

  </html>