The additional function of a drag element in these days is to align to the grid, in effect determining the initial position of the element, and then dragging the element, moving a fixed distance each time. Allows elements to be aligned within the grid. First, then in detail.
With a GIF, you can see that the movement of each element moves at a minimum unit distance. And each element is aligned to the grid.
First, according to the demo to explain the ideas and details, the following will give the demo code.
1. Determine the minimum unit of each movement of the element (10px and 10px in the demo), i.e. the amount of displacement per horizontal or vertical is 10px. A grid background is laid out 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 a multiple of 10px). Example: element width height 50px * 50px, the initial position of the element is 0XP * 0px. The benefit of this is that when you start loading, you can guarantee that the element covers an entire number of small meshes (that is, 5 * 5 small meshes) without overwriting the incomplete mesh. This is actually a way to beautify the location of a user or obsessive-compulsive disorder without being so tangled. Know a friend can not be so deliberate, understand just fine.
3. The most important thing is how to determine when to move a fixed distance. This demo effect to understand one thing: the mouse movement and the element movement is corresponding, but not real-time equivalence (of course, if the smallest unit is not considered, just drag the element, and then set the position of the element as the mouse position, it can be understood that the mouse movement and the element movement is real-time equivalence). Back to the demo, when the mouse moves over the page, it is a pixel-moving pixel (you can see the position of the mouse move through Console.log (E.pagex)). The element is moved once every 10px. This is the key to our understanding and the key to the entire demo.
Understand the above ideas, combined with code and comments, and then explain:
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <style>Body{margin:0px;padding:0px; }Div{margin:0px;padding:0px; } </style> <Scriptsrc= "Js/jquery-1.11.2.js"></Script></Head><Body><Divstyle= "Height:600px;background:url (data:image/svg+xml;base64, phn2zyb3awr0ad0imtawjsigagvpz2h0psixmdaliib4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcipiagica8zgvmcz4gicagicagidxwyxr0z Xjuiglkpsjncmlkiib3awr0ad0imtaiighlawdodd0imtaiihbhdhrlcm5vbml0cz0idxnlclnwywnlt25vc2uipiagicagicagicagidxwyxroigq9ik0gmt Agmcbmidagmcawidewiibmawxspsjub25liibzdhjva2u9iinkzgrkzgqiihn0cm9rzs13awr0ad0imsigb3bhy2l0et0imsiglz4gicagicagidwvcgf0dgv ybj4gicagpc9kzwzzpiagica8cmvjdcb3awr0ad0imtawjsigagvpz2h0psixmdaliibmawxspsj1cmwoi2dyawqpiiavpjwvc3znpg==) "> <DivID= "BK"style= "Width:50px;height:50px;background:red;position:absolute"></Div></Div></Body> <Script> $(function(){ varOrgx,orgy,elex,eley,hasmove=false; $("#bk"). On ("MouseDown",function(e) {ORGX=E.pagex; //record the horizontal position of the mouseOrgy=E.pagey;//record the vertical position of the mouseElex=$( This). Offset (). Left; //record the horizontal position of an elementEley=$( This). Offset (). Top; //record the vertical position of an elementHasmove=true; //indicates that the current element can be dragged and labeled when the mouse is pressed }); $ (document). On ("MouseMove",function(e) {if(hasmove) {//perform actions when elements can be dragged and dragged //new Position calculation method adds a new displacement amount to the last position of the element var Left=Elex+Math.Round ((E.pagex-orgx)/ Ten ) * Ten; varTop=Eley+Math.Round ((E.pagey-orgy)/ Ten ) * Ten; //Update location Information $("#bk"). css ({top:top, left:left}); }}). On ("MouseUp",function(e) {Hasmove=false; //setting elements cannot be dragged when Mouse is released }); }) </Script></HTML>
The above code gives a more detailed comment, where the most critical code is
Math.Round ((E.PAGEX-ORGX)/10) * 10;
The code is a new offset for the calculated element, minus the mouse position when the element was pressed with the latest position of the mouse, dividing by the minimum unit 10, rounding out the integer value, and then multiplying by the smallest unit 10. You can get the unit distance where the element should be moved. If you don't understand, you can run the code and think for yourself. (It is also possible to use Mach's ceil and floor methods, of course).
Okay, this is how JavaScript implements drag-and-drop element alignment to the grid. Essentially, after the position of the element is initialized (according to the minimum unit multiplier initialization), the fixed distance (minimum unit distance) is moved each time.
Thanks for reading.
Reprint please indicate source ~~~3q
JavaScript implements drag-and-drop elements aligned to the grid (fixed distance per move)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
