鼠标拖动

最新推荐文章于 2022-02-20 19:04:05 发布

HongArcher

最新推荐文章于 2022-02-20 19:04:05 发布

阅读量328

点赞数 2

本文链接：https://blog.csdn.net/HongArcher/article/details/77915012

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           div{
               width: 150px;
               height: 150px;
               background-color: pink;
               position: absolute;
           }
           p{
               width: 100px;
               height: 100px;
               background-color: yellow;
               position: absolute;
               left: 300px;
               top: 200px;
           }
       </style>
   </head>
   <body>
       <div></div>
       <p></p>
   </body>
   <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
   <script type="text/javascript">
       $('div').on('mousedown',function(event){
           var disX=event.clientX-$('div').offset().left;
           var disY=event.clientY-$('div').offset().top;

           $('div').on('mousemove',function(event){
           var _left=(event.clientX-disX)+'px';
           var _top=(event.clientY-disY)+'px';
               $('div').css({'marginLeft':_left,'marginTop':_top});
                   if ($('p').offset().left <= $('div').width() + $('div').offset().left &&
                   $('div').offset().left <= $('p').width() + $('p').offset().left &&
                   $('p').offset().top <= $('div').width() + $('div').offset().top &&
                   $('div').offset().top <= $('p').width() + $('p').offset().top){
                       $('p').css({'background-color':'red'});
                   }else{
                       $('p').css({'background-color':'yellow'});
               }
           });



       });
       $(document).on('mouseup',function(){
           $('div').off('mousemove');
       });


   </script>
</html>