JavaScript实现拖拽元素对齐到网格（每次移动固定距离） -js教程-PHP中文网

首页

web前端

js教程

JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

黄舟

Feb 20, 2017 pm 02:38 PM

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

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;
}
p{
margin:0px;
padding:0px;
}
</style>
<script src="js/jquery-1.11.2.js"></script>
</head>
<body>
<p style="height: 600px;background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiAgIC
A8ZGVmcz4gICAgICAgIDxwYXR0ZXJuIGlkPSJncmlkIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0gMTAgMCBMIDAgMCAw
IDEwIiBmaWxsPSJub25lIiBzdHJva2U9IiNkZGRkZGQiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMSIgLz4gICAgICAgIDwvcGF0dGVybj4gICAgPC9kZWZzPiAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ
2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPjwvc3ZnPg==)">
<p id="bk" style="width:50px;height:50px;background: red;position: absolute"></p>
</p>
</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方法也可以）。

以上就是JavaScript实现拖拽元素对齐到网格（每次移动固定距离）的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr