Home  >  Article  >  Web Front-end  >  jQuery version element dragging prototype code_jquery

jQuery version element dragging prototype code_jquery

WBOY
WBOYOriginal
2016-05-16 18:07:19862browse

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:

Copy the code The code is as follows:

< 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
Statement:
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