jq盒子拖拽

最新推荐文章于 2021-10-22 21:24:37 发布

张细枝

最新推荐文章于 2021-10-22 21:24:37 发布

阅读量871

点赞数 2

本文链接：https://blog.csdn.net/weixin_44884650/article/details/89531927

版权

拖拽案例
首先在下手打代码之前，先缕清思路，
需要用到的事件：1.鼠标按下 2.跟随鼠标移动 3.鼠标抬起。
在鼠标按下，并移动时达成拖拽块的跟随效果，鼠标抬起时，将拖拽块定位到当前位置，
并且该块的拖拽范围应当是处在当前窗口内，也就是说无法超过窗口大小。
首先布局

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#box{
    width: 150px;
    height: 150px;
    background:pink;
    position: absolute;//为div添加绝对定位。
}
    </style>
</head>
<body>
    <div id="box"> </div>
</body>
</html>

接下来就是jq部分。
需要使用到的获取属性的几个方法
在代码里会一一备注。

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
   var box = $("#box");  
   box.mousedown(function(e) {//鼠标按下
       var e = e||event;  //注意兼容性的问题，多用于鼠标和键盘事件
       var x = e.clientX-box.offset().left;  //在这里是用鼠标当前位置的横坐标减去该盒子左边界到父级元素的左边界距离。用到的鼠标的clientX属性和offset（）这两个属性。.left是直接调用offse里面的left。
       var y = e.clientY-box.offset().top;//这里求高也一样
       //得出的是鼠标到该盒子左边框的距离
       $(document).mousemove(function(e) {//鼠标跟随
       var e = e||event;
       var movex = e.clientX-x;//移动的位置是用鼠标距离减去刚刚求出的X，Y
       var movey = e.clientY-y;
       var winx = $(document).width();//这里求出窗口的宽
       var winy = $(document).height();//窗口的高
       var maxx = winx - box.width();//最大的移动距离就是窗口大小减去盒子的宽高
       var maxy = winy - box.height();
       if (movex<0) {
        movex=0
        };
        if (movey<0) {
            movey = 0
        };
        //判断盒子是否超出左侧和下侧边框
        移动距离控制在窗口内
        if (movex>maxx) {
            movex = maxx
        };
        if (movey>maxy) {
            movey=maxy
        };
        //判断是否超出右侧上侧边框
        同样控制在内
        box.css({'left':movex+'px','top':movey+'px'});
       })
   });

   $(document).mouseup(function(e) {
      var e = e||event;
      $(document).off('mousemove')
      //这里用到的是off（）消除绑定事件。
   });

</script>