JavaScript implements drag-and-drop element alignment to grid (fixed distance per move) _javascript tips

These days in doing a drag-and-drop element of the additional function, is to align to the grid, is actually to determine the initial position of good elements, and then drag elements, each move a fixed distance. Allow elements to be aligned within the grid. First on the effect chart, and then in detail to explain the details of the problem

Make a GIF, you can see that each element is moved in the smallest unit distance. and the elements are aligned to the grid each time.

First, according to the demo to explain the ideas and details, the following will give the demo code.

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

2. In order to see the effect more visibly, the width of the element is initialized (multiples of 10px) and the default position (also multiples of 10px). For example: The element width is 50px * 50px, the element's initial position is 0XP * 0px. The advantage of this is that when you start loading, you can guarantee that the elements will cover the entire number of small grids (that is, 5 * 5 small grids), and not overwrite the incomplete grid. In fact, in order to let users or people with obsessive-compulsive disorder need not so tangled, in fact, is only a beautification of the location of the operation. Understand a friend can not be so deliberately, understand the good.

3. The most important thing is how to determine when to move a fixed distance. This demo effect to understand one thing: mouse movement and element movement are corresponding, but not real-time peers (of course, if the smallest unit is not considered, just drag the element, and then set the position of the element to the mouse position, then you can understand that the mouse movement and element movement is real-time equivalence). Back to demo instructions, when the mouse is moving on the Web page, it is a pixel moving (you can observe the position of the mouse movement through Console.log (E.pagex)). And the elements are moved every 10px. This is the key to our understanding, but also the key to the whole demo.

Understanding the above ideas, combined with code and comments, and then explain:

<! DOCTYPE html>  

A more detailed annotation of the surface code, where the most critical code is

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


This code calculates the new displacement of the element, subtracting the mouse position when the element is pressed by the current position of the mouse, dividing by the minimum unit 10, rounding the integer value, and multiplying by the smallest unit 10. You can get the unit distance that the element should be moved. If you don't understand, you can run the code and think for yourself. (Of course, you can use the ceil and floor methods of Mach).

Okay, this is the JavaScript implementation of drag-and-drop element alignment to the grid implementation method. essentially, after initializing the position of a good element (initialized at the minimum unit multiple), you can move a fixed distance (minimum unit distance) each time.