JavaScript实现Html元素的拖拽

<html>
    <head>
        <title>JavaScript实现Html元素的拖拽</title>

      
<script language=javascript>
      var diffx,diffY;
      var objDiv;
      function beginDrag()
      {
         objDiv = document.getElementById("div1");
        diffX = event.clientX -objDiv.offsetLeft;
         diffY = event.clientY - objDiv.offsetTop;
        document.body.attachEvent("onmousemove",mousemove);
        document.body.attachEvent("onmouseup",removeEvent);
       
       
      }
      function mousemove()
      {
        
        objDiv.style.left = event.clientX-diffX;
        objDiv.style.top =event.clientY-diffY;
       
      }
      function removeEvent()
      {
        objDiv = window.event.srcElement;
        document.body.detachEvent("onmousemove",mousemove);
        document.body.detachEvent("onmouseup",removeEvent)
      }
  
      </script> 
    </head>
    <body>
        <p >JavaScript实现DIV的拖拽<div id="div1" style="background-color:Blue; width:100px; height:100px; position:absolute;" onmousedown="beginDrag()"></div></p>
       
    </body>
</html> 

你可能感兴趣的:(JavaScript,html,function,div)