JavaScript实现拖放元素与网格对齐(一次移动固定距离)

这几天我在做一个拖动元素的附加功能，就是对齐网格，就是确定元素的初始位置，然后每次拖动元素的时候移动一个固定的距离。以便所有元素都可以在网格内对齐。先放上效果图，然后详细讲解细节

通过制作gif图，我们可以看到每个元素都按照最小单位距离移动。并且元素每次都与网格对齐。

先根据演示讲解思路和细节，然后给出演示代码。

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

2.为了更清楚地看到效果，元素的宽度和高度(都是10px的倍数)以及默认位置(也是10px的倍数)都会被初始化。示例：元素的宽度和高度为50px * 50px，元素的初始位置为0xp * 0px。这样做的好处是，在开始加载时，可以保证元素覆盖整数个小网格(即5 * 5个小网格)，不会有不完整的网格。其实这篇文章是想让用户或者有强迫症的人不用那么纠结，但其实只是美化设置位置的一个操作。懂的朋友不用那么刻意，懂就好。

3.最重要的是如何确定何时移动固定距离。这个演示效果需要了解一点：鼠标移动和元素移动是对应的，但不是实时等价的(当然如果不考虑最小单位，只需要拖拽元素，然后将元素的位置设置为鼠标的位置，那么就可以理解为鼠标移动和元素移动是实时等价的)。回到演示描述，当鼠标在网页上移动时，会一个像素一个像素的移动(可以通过console.log(e.pageX)观察鼠标移动的位置)。元素每10px移动一次。这是我们理解的关键，也是整个演示的关键。

理解以上思路，结合代码和注释，然后解释：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style body { margin :0 px；padding:0px} div { margin:0pxpadding:0px}/style script src=' http : js/jquery-1 . 11 . 2 . js '/script/head dydiv style=' height : 600 px；背景： URL(data : image/SVG XML；base64，phn2zyb3b awr 0 ad 0 imtawjsigagvpz 2h 0 psixmdalib4 bwxu cz0 iahr0 cdovl3d 3d dy 53 M5 vcmcvmjawm 9 zdmcipiaga 8 zgvmcz4gicagicagidxwyxr0 zjuiglkpsjncmlkib3b awr 0 ad 0 imta iighlawdodd 0 imtaiihbhdhcm5 vbml0 cz0 idxnlclnwywywywnl t 25 VC 2 uipiagicaggicagidxwyriogqgq高度：50 px；背景：红色；position : absolute '/div/div/body script $(function(){ var OrgX，orgY，eleX，eleY，hasMove=false$('#bk ')。on('mousedown '，函数(e){ OrgX=e . PageX；//记录鼠标orgY=e.pageY的水平位置；//记录鼠标eleX的垂直位置=$(这个)。偏移量()。向左；//记录eleY=$(this)元素的水平位置。偏移量()。顶部；//记录元素的垂直位置hasMove=true//当鼠标按下时，表示当前元素可以拖动并标记})；$(文档)。on ('mousemove '，函数(e){ if(has move){//当一个元素可以被拖动时，执行一个操作//新的位置计算方法添加一个新的位移varleft=elexmath。round((e . pagex-orgx)/10)* 10；var top=Eley math . round((e . Pagey-OrgY)/10)* 10；//更新位置信息$ ('# bk ')。CSS ({top:top，left : left })；}}).on('mouseup '，函数(e){ HasMoVE=false；//释放鼠标时不能拖动设置元素})；})/script/html代码给出了更详细的注释，其中最关键的代码是

math . round((e . pagex-OrgX)/10)* 10；

这个代码是计算元素的新位移，用鼠标的最新位置减去元素被按下时的鼠标位置，除以最小单位10，取整后得到整数值，再乘以最小单位10。可以得到元素应该移动的单位距离。如果你不明白这一点，你可以运行代码，自己思考。(当然，也可以使用Mach天花板和地板方法。).

好了，这就是javascript如何拖放元素使它们与网格对齐。本质上，元素的位置初始化(按照最小单位倍数初始化)后，每次移动固定距离(最小单位距离)就足够了。