Simple mouse Drag effect (native JS implementation)

Before in the chat group to see someone said the interview was asked how to achieve a drag effect, then saw in the heart silently thinking, the results found that it seems I can not write Ah. In the face of a solution to a thought, personally knocked a, see Zhang Xin xu big God write code, really very powerful, many study, (feel casually search a front-end aspects of the problem can see his website, really admire, wrote so many articles, very grateful. ）
Okay, here's the thing to go.
To achieve an effect first to understand the logic, know that the implementation of logic, you can code.
The first thing I achieved was:

1. After the mouse is pressed, you can perform subsequent effects
2. The mouse has been pressed, then the mouse moves, and the dragged elements need to be moved together
3. Mouse release, then stop moving

The big step is such a process, in fact, the corresponding is three events:

1. OnMouseDown
2. OnMouseMove
3. OnMouseUp

Then we'll see what happens when these three events occur.

When the mouse is pressed, we have to record the position of the current element newsite. A marker is also set to indicate the state at which the mouse is pressed to facilitate mouse movement of event execution.
When the mouse is released, we want to change the tag, indicating that the mouse is released, when the mouse movement can no longer move elements.
When the mouse is pressed and moved, we need to record the mouse each move position currentsite,currentsite and newsite difference is the distance of the mouse movement, but also the element should move the distance, and then set the position of the element OK.

Of course, one important point is that the position property of the element that needs to be moved should be set to absolute or relative so that the element can move.
At the same time, if there is an element inside the element that might cause the browser default event to occur, to prevent the default event from occurring, such as when a picture is clicked, the browser will pop up a new window to display the image by default, and we should prevent this event from happening. You can view the code in a specific way.

Specific demo to view: http://www.w3cfuns.com/notes/19044/b3c57594c1f1b220f1a102d4e9147828.html

1 //parameter list2 varparams = {3left:0,4top:0,5currentx:0,6currenty:0,7Flagfalse8 };9 //get related CSS propertiesTen varGetcss =function(o, key) { One     //getComputedStyle is designed to be compatible with the FF browser A     returnO.currentstyle? O.currentstyle[key]: Document.defaultView.getComputedStyle (O,false) [key]; - }; -  the //the implementation of drag and drop - varStartDrag =function(target, callback) { -     //first get the left, top property value of the target element -     if(Getcss (Target, "left")!== "Auto") { +Params.left = Getcss (target, "left"); -     } +     if(Getcss (Target, "top")!== "Auto") { AParams.top = Getcss (target, "top"); at     } -      -Target.onmousedown =function(event) { -         //when the mouse is pressed to indicate that the element can be moved, the tag is set to true; -Params.flag =true; -          in         /*to prevent the default event that occurs when dragging elements in the browser, - For example, when you drag a picture, a new window appears showing the picture, and the following code prevents the event from occurring to         */ +         if(event.preventdefault) { - Event.preventdefault (); the}Else { *Event.returnvalue =false; $         }Panax Notoginseng          -         varE =event; theParams.currentx =E.clientx; +Params.currenty =E.clienty; A     }; theTarget.onmouseup =function() { +         //set the marker to False when the mouse is released, indicating that it cannot be moved -Params.flag =false; $         //Update the position of the element again when the mouse is released $         if(Getcss (Target, "left")!== "Auto") { -Params.left = Getcss (target, "left"); -         } the         if(Getcss (Target, "top")!== "Auto") { -Params.top = Getcss (target, "top");Wuyi         } the     }; -Target.onmousemove =function(event) { Wu         varE = event?event:window.event; -         /*can be moved when params.flag==true, indicating that the mouse is pressed in the state at this time About         */ $         if(params.flag) { -             //gets the position of the current mouse -             varNOWX =E.clientx, -Nowy =E.clienty; A             //gets the current mouse movement distance, which is the current mouse position minus the initial position +             varDISX = nowx-Params.currentx, theDisy = Nowy-Params.currenty; -             //updates the position of the element, parsenint in order to change the property value to a numeric type $Target.style.left = parseint (params.left) + disx + "px"; theTarget.style.top = parseint (params.top) + Disy + "px"; the         } the     } the};

View Code

Simple mouse Drag effect (native JS implementation)