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

jQuery version element dragging prototype code_jquery

WBOY
Release: 2016-05-16 18:07:19
Original
908 people have browsed it

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
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template