jQuery鼠标拖动元素事件（实现拖动一个派蒙的效果)

最新推荐文章于 2024-06-05 10:04:13 发布

godlike-icy

最新推荐文章于 2024-06-05 10:04:13 发布

阅读量2.2k

点赞数 2

分类专栏： web前端文章标签： javascript css jquery js

本文链接：https://blog.csdn.net/qq_43682422/article/details/119358804

版权

web前端专栏收录该内容

73 篇文章 3 订阅

订阅专栏

jQuery鼠标拖动元素事件（实现拖动一个派蒙的效果)

1.引入jquery.js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2.实现原理

通过设置鼠标按下事件，鼠标移动事件，和鼠标弹起事件来完成整个效果。

2.1.获取可拖动元素位置

2.2.鼠标移动事件mousemove

可以获取鼠标的位置，通过鼠标位置的偏移量（改变量)来确定想要拖动元素的新的位置。新位置 = 之前的位置 + 偏移量

2.3.设置可拖动范围

这个可以不做设置，那么元素则可以拖到浏览器窗口外面。

也可自己定义范围的大小，本例中范围设置成了浏览去窗口可视区域大小。

3.代码实现

3.1 html部分

  <div class="wrapper">
      <div class="paimeng"></button></div>
    </div>

3.2 css部分

.paimeng {
        background: url("https://www.icyakuya.website/jiaban/img/paimeng.gif");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 30%;
        left: 30%;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        cursor: pointer;
        position: absolute;
      }

3.3 js部分

 $(function () {

   //获得可移动dom

   var paimeng = $(".paimeng").first();

   //存放数据的对象

   var date = {};

   //鼠标按下事件

   paimeng.mousedown(function (e) {

    //获得鼠标偏移量

    date.left = e.pageX;

    date.top = e.pageY;

    //console.log(date.left+"+++"+date.top);

    //获取派萌初始位置

    date.sPositionX = $(this).position().left;

    date.sPositionY = $(this).position().top;

    //console.log(date.sPositionX+"+++"+date.sPositionY);



    //鼠标移动事件

    $(document).mousemove(function (e) {

     //新的偏移位置

     date.newleft = e.pageX;

     date.newtop = e.pageY;

     //偏移量

     date.x = date.newleft - date.left;

     date.y = date.newtop - date.top;

     //派萌 新的位置

     date.newPositionX = date.sPositionX + date.x;

     date.newPositionY = date.sPositionY + date.y;

     if (date.newPositionY < 0) {

      //当上边的偏移量小于0的时候，就是上边的临界点，就让新的位置为0

      date.newPositionY = 0;

     }

     //如果向下的偏移量大于文档对象的高度减去自身的高度，就让它等于这个高度

     if (date.newPositionY > $(document).height() - paimeng.height()) {

      date.newPositionY = $(document).height() - paimeng.height();

     }

     //右限制

     if (date.newPositionX > $(document).width() - paimeng.width()) {

      date.newPositionX = $(document).width() - paimeng.width();

     }

     if (date.newPositionX < 0) {

      //左边的偏移量小于0的时候设置 左边的位置为0

      date.newPositionX = 0;

     }

     paimeng.css({

      left: date.newPositionX + "px",

      top: date.newPositionY + "px",

     });

     //鼠标抬起事件

     $(document).mouseup(function (e) {

      $(document).off("mousemove");

     });

    });

   });

  });