javascript，一幅图让你看懂DIV拖拽

原创

xyphf_和派孔明 2022-07-22 09:42:22 博主文章分类：常用特效 ©著作权

文章标签 javascript BOM DOM html 前端工程师 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者xyphf_和派孔明的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="和派孔明——前端工程师" />
<meta name="copyright" content="<span style="font-family: Arial, Helvetica, sans-serif;">和派孔明——前端工程师</span><span style="font-family: Arial, Helvetica, sans-serif;">" /></span>
<title>DIV拖拽解析</title>
<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
#div1{width:200px;height:200px; background:red; position:absolute;left:0;top:0;}
</style>
<script>
window.οnlοad=function(){
  var oDiv=document.getElementById('div1');
  oDiv.οnmοusedοwn=function(ev){
    var oEvt=ev||event;
    var disX =  oEvt.clientX - oDiv.offsetLeft;
    var disY =  oEvt.clientY - oDiv.offsetTop;
    document.οnmοusemοve=function(ev){
      var oEvt=ev||event;
      oDiv.style.left=oEvt.clientX-disX+'px';  
      oDiv.style.top=oEvt.clientY-disY+'px';  
    };
    document.οnmοuseup=function(){
      document.οnmοusemοve=null;//不要粘着我
      document.οnmοuseup=null;//性能考虑
      
      oDiv.releaseCapture && oDiv.releaseCapture();//释放截获    
    };
    
    oDiv.setCapture && oDiv.setCapture();//事件截获
    return false;//阻止默认
  };  
  
};
</script>
</head>

<body>
dfasdfasdf<br>
<p>asdfasd234234234</p>
<div id="div1">
  asdfasdfasdf<img src="a3.png">
</div>

</body>
</html>