你的位置:首页 > Java教程

[Java教程]JavaScript实现拖拽元素对齐到网格(每次移动固定距离)


这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离。让元素都可以在网格内对齐。先上效果图,然后在详细说明一下细节问题

做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的。且每次元素都是对齐到网格的。

先根据demo说明一下思路和细节,后面会给出demo代码。

1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px。铺上一层网格背景是为了帮助我们更好的看到效果(demo中的每个网格也是10px * 10px)。

2. 为了可以更加明显的看到效果,初始化了元素的宽高(均为10px的倍数)和默认位置(同样为10px的倍数)。举例说明:元素宽高 50px * 50px,元素的初始位置为0xp * 0px。这样做的好处是一开始加载时就可以保证元素覆盖整数个的小网格(也就是 5 * 5 个小网格),不会出现覆盖不完整的网格。这一条其实为了让用户或者有强迫症的人不用这么纠结,实际上只是一个美化规置位置的操作。懂的朋友可以不用这么刻意,明白就好。

3. 最重要就是要如何确定什么时候移动固定的距离。这个demo效果要明白一件事:鼠标移动和元素移动是对应的,但不是实时对等的(当然,如果不考虑最小单位,只是纯拖拽元素,然后将元素的位置设置为鼠标的位置,这时可以理解为鼠标移动和元素移动是实时对等的)。回到demo说明,鼠标在网页上移动时,是一个像素一个像素移动的(可以通过console.log(e.pageX) 观察鼠标移动的位置 )。而元素是每10px移动一次。这一点就是我们要理解的关键,也是整个demo的关键。

了解了上面的思路,结合代码和注释,再说明一下:

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    body{      margin:0px;      padding:0px;    }    div{      margin:0px;      padding:0px;    }  </style>  <script src="js/jquery-1.11.2.js"></script></head><body><div style="height: 600px;background: url(data:image/svg+>  <div id="bk" style="width:50px;height:50px;background: red;position: absolute"></div></div></body>  <script>    $(function(){      var orgX,orgY,eleX,eleY,hasMove=false;      $("#bk").on("mousedown",function(e){        orgX= e.pageX; //记录鼠标的水平位置        orgY= e.pageY; //记录鼠标的垂直位置        eleX=$(this).offset().left; //记录元素的水平位置        eleY=$(this).offset().top;  //记录元素的垂直位置        hasMove=true;  //鼠标按下时标明当前元素可以拖拽标识      });      $(document).on("mousemove",function(e){        if(hasMove){  //当元素可以拖拽时执行操作          //新位置计算方法为元素的上次位置加上新的位移量          var left=eleX+Math.round( ( e.pageX - orgX ) / 10 ) * 10;          var top= eleY+Math.round( ( e.pageY - orgY) / 10 ) * 10;          //更新位置信息          $("#bk").css({            top:top,            left:left          });        }      }).on("mouseup",function(e){        hasMove=false;  //鼠标松开时设置元素不可拖拽      });    })  </script></html>

上面的代码给出的较详细的注释,其中,最为关键的代码就是

Math.round( ( e.pageX - orgX ) / 10 ) * 10;

该代码是计算元素新的位移量,用鼠标的最新位置减去在元素按下时的鼠标位置,除以最小单位10,进行四舍五入后获得整数值,然后在乘以最小单位10。就可以获得元素应该需要移动的单位距离了。这条如果不明白可以运行代码自己思考体会一下。(当然使用Mach的ceil和floor方法也可以)。

okay,以上就是javascript实现拖拽元素对齐到网格的实现方法。实质上是在初始化好元素的位置后(按照最小单位倍数初始化),每次移动固定距离(最小单位距离)即可。

感谢阅读。

转载请说明出处~~~3Q