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 ExampleStatement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn