js 实现元素拖拽

最新推荐文章于 2025-05-23 17:03:50 发布

Mr.A.D.0013

最新推荐文章于 2025-05-23 17:03:50 发布

阅读量240

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/Bannerparter/article/details/127854238

版权

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  html,body{    /*必须使用此CSS，否则body上的事件无效*/
    width:100%;
    height:100%;
  }
  #dd{
    width:120px;
    height:120px;
    background:#00ff00;
    position:absolute;
  }
  </style>
  <script>
    var dd; 				//要拖动的div引用
    var mflag=false; 	//移动标志位
    function ondown(){
        dd=document.getElementById('dd');
        mflag=true;
    }
    function onmove(e){
        if(mflag){
            dd.style.left=e.clientX-60+"px";  //-60是为了把鼠标放在div的中心
            dd.style.top=e.clientY-60+"px";
        }
    }
    function onup(){
        mflag=false;
    }
  </script>
 </head>
 <body onmousemove="onmove(event)"> <!-- 放在body上是为了鼠标快速移动时不会脱离div -->
 <div id='dd' onmousedown='ondown()' onmouseup='onup()' style='left:80px; top:120px;'>
 </div>
 </body>
</html>