Home > Web Front-end > JS Tutorial > jquery implements simple drag-and-drop effect example compatible with all mainstream browsers (optimization)_jquery

jquery implements simple drag-and-drop effect example compatible with all mainstream browsers (optimization)_jquery

WBOY
Release: 2016-05-16 17:30:53
Original
949 people have browsed it

Compared with previous article, the drag and drop effect has been optimized.
js code: fun.js

Copy code The code is as follows:

_MoveObj = null ;//All variables, used to represent the current div
z_index = 0; //Z direction
jQuery.fn.myDrag=function(){
_IsMove = 0; // Whether to move 1. Move
_MouseLeft = 0; //div left coordinates
_MouseTop = 0; //div top coordinates
$(document).bind("mousemove",function(e){
if(_IsMove== 1){
$(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop});
}
}).bind("mouseup",function( ){
_IsMove=0;
$(_MoveObj).removeClass("downMouse");
});
return $(this).bind("mousedown",function(e){
_IsMove=1;
_MoveObj = this;
var offset =$(this).offset();
_MouseLeft = e.pageX - offset.left;
_MouseTop = e.pageY - offset.top;
z_index ;
_MoveObj.style.zIndex=z_index;
$(_MoveObj).addClass("downMouse");
});
}

html code:
Copy code The code is as follows:




demo.htm






Drag 1

Drag 2

Drag 3

Drag 4

Drag 5

Drag 6




jquery implements simple drag-and-drop effect example compatible with all mainstream browsers (optimization)_jquery
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