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

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部分

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");

​     });

​    });

   });

  });

****注意事项：
鼠标的按下事件包含鼠标的移动事件，鼠标的移动事件包含鼠标抬起事件，关系不能乱，嵌套关系。
另外鼠标的抬起事件中，写的事件是关闭鼠标移动事件。

3.5 派蒙的动图(自己拿，图片来自网络，如果侵权，联系删除）