This article mainly analyzes the drag-and-drop prototype and provides a simple example for fans who are new to JQuery.
After introducing Jquery.js:
< script type="text/javascript">
$(function(){
//Bind drag element object
bindDrag(document.getElementById('test'));
}) ;
function bindDrag(el){
//Initialization parameters
var els = el.style,
//X and Y axis coordinates of the mouse
x = y = 0;
//Evil index finger
$(el).mousedown(function(e){
//After pressing the element, calculate the current mouse position
x = e.clientX - el.offsetLeft;
y = e.clientY - el.offsetTop;
//Capture focus under IE
el.setCapture && el.setCapture();
//Binding event
$(document).bind ('mousemove',mouseMove).bind('mouseup',mouseUp);
});
//Move event
function mouseMove(e){
//Universe super invincible operation. ..
els.top = e.clientY - y 'px';
els.left = e.clientX - x 'px';
}
//Stop event
function mouseUp (){
//Release focus under IE
el.releaseCapture && el.releaseCapture();
//Uninstall event
$(document).unbind('mousemove',mouseMove).unbind ('mouseup',mouseUp);
}
}
Download:
Full Example