<script src="js/jquery-1.11.2.js">《script》《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》
面的代码给出的较详细的注释，其中，最为关键的代码就是
Math.round( ( e.pageX - orgX ) / 10 ) * 10;
该代码是计算元素新的位移量，用鼠标的最新位置减去在元素按下时的鼠标位置，除以最小单位10，进行四舍五入后获得整数值，然后在乘以最小单位10。就可以获得元素应该需要移动的单位距离了。这条如果不明白可以运行代码自己思考体会一下。（当然使用Mach的ceil和floor方法也可以）。
以上就是JavaScript实现拖拽元素对齐到网格（每次移动固定距离）的内容，更多相关内容请关注PHP中文网（www.php1.cn）！
