鼠标拖拽特效

最新推荐文章于 2023-04-10 09:19:08 发布

愤怒的笨鸟

最新推荐文章于 2023-04-10 09:19:08 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/qq_45593083/article/details/102532224

版权

<title>鼠标拖拽事件</title>
 </head>
 <body>
  <div id="box" class="box">
   <div id="drop" class="hd">注册信息（可以拖拽）
   <span id="box_close">【关闭】</span>
   </div>
   <div class="bd"></div>
  </div>
  <script>
   var box = document.getElementById('box');
   var drop = document.getElementById('drop');
   drop.onmousedown = function(event){
    var event =event || window.event;
    var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
    var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
    var spaceX = pageX -box.offsetLeft;
    var spaceY = pageY -box.offsetTOP;
   };
   document.onmousemove = function (event){
    var event = event || window.event;
    var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
    var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
    box.style.left = pageX - spaceX +'px';
    box.style.top =pageY -spaceY +'px';
    if(window.getSelection){
     window.getSelection().removeAllRanges();
    }else{
     document.selection.empty();
    }
   };
   
  </script>
  
 </body>

愤怒的笨鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖拽特效

<title>鼠标拖拽事件</title> </head> <body> <div id="box" class="box"> <div id="drop" class="hd">注册信息（可以拖拽） <span id="box_close">【关闭】</span> </...
复制链接

扫一扫