Home >Web Front-end >JS Tutorial >JavaScript implements dragging elements to align to the grid (moving a fixed distance each time)

JavaScript implements dragging elements to align to the grid (moving a fixed distance each time)

黄舟Original: 2017-02-20 14:38:481855browse

In the past few days, I have been working on an additional function for dragging elements, which is to align to the grid. In fact, it means determining the initial position of the element, and then moving the element a fixed distance each time when dragging it. Allows elements to be aligned within the grid. First show the renderings, and then explain the details in detail

JavaScript implements dragging elements to align to the grid (moving a fixed distance each time)

I made a gif. You can see that every time the element moves, it moves according to the minimum unit distance. . And each time the elements are aligned to the grid.

First explain the ideas and details based on the demo, and the demo code will be given later.

1. Determine the minimum unit of each movement of the element (10px and 10px in the demo), that is, each horizontal or vertical displacement is 10px. Laying a layer of grid background is to help us see the effect better (each grid in the demo is also 10px * 10px).

2. In order to see the effect more clearly, the width and height of the element (both are multiples of 10px) and the default position (also multiples of 10px) are initialized. For example: the width and height of the element are 50px * 50px, and the initial position of the element is 0xp * 0px. The advantage of this is that when loading initially, the element can be guaranteed to cover an integral number of small grids (that is, 5 * 5 small grids), and there will be no incomplete grid coverage. This article is actually to prevent users or people with obsessive-compulsive disorder from having to worry so much. It is actually just an operation to beautify the placement position. Friends who understand don't need to be so deliberate, just understand.

3. The most important thing is how to determine when to move a fixed distance. There is one thing to understand about this demo effect: mouse movement and element movement correspond, but they are not equivalent in real time (of course, if you do not consider the smallest unit and just drag the element, and then set the element's position to the mouse position, At this time, it can be understood that mouse movement and element movement are equivalent in real time). Back to the demo instructions, when the mouse moves on the web page, it moves pixel by pixel (you can observe the position of the mouse movement through console.log(e.pageX)). The element moves every 10px. This is the key to our understanding and the key to the entire demo.

After understanding the above idea, combined with the code and comments, let me explain again:

<!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>

The above code gives more detailed comments , among them, the most critical code is

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

This code is to calculate the new displacement of the element, subtracting the latest position of the mouse when the element is pressed The mouse position is divided by the minimum unit of 10, rounded to obtain an integer value, and then multiplied by the minimum unit of 10. You can get the unit distance that the element should move. If you don’t understand this, you can run the code and think about it yourself. (Of course, you can also use Mach’s ceil and floor methods).

The above is the JavaScript implementation of dragging elements to align to the grid (moving a fixed distance each time). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to get css style by parsing jsNext article：How to get css style by parsing js

See more

JavaScript implements dragging elements to align to the grid (moving a fixed distance each time)

Related articles