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

WBOYOriginal: 2016-05-16 17:30:53959browse

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