This article mainly analyzes the drag-and-drop prototype and provides a simple example for fans who are new to JQuery.
After Jquery. js is introduced:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
// Bind the drag Element Object
BindDrag (document. getElementById ('test '));
});
Function bindDrag (el ){
// Initialization parameters
Var els = el. style,
// Coordinates of the X and Y axes of the mouse
X = y = 0;
// Evil index finger
$ (El). mousedown (function (e ){
// Press the element to calculate the current mouse position
X = e. clientX-el. offsetLeft;
Y = e. clientY-el. offsetTop;
// Capture the focus in IE
El. setCapture & el. setCapture ();
// Bind events
$ (Document). bind ('mousemove ', mousemove). bind ('mouseup', mouseup );
});
// Move the event
Function mouseMove (e ){
// Super invincible universe computing...
Els. top = e. clientY-y + 'px ';
Els. left = e. clientX-x + 'px ';
}
// Stop the event
Function mouseUp (){
// Release the focus in IE
El. releaseCapture & el. releaseCapture ();
// Uninstall the event
$ (Document). unbind ('mousemove ', mousemove). unbind ('mouseup', mouseup );
}
}
</Script>
Download: complete example