jquery web element drag and drop plug-in effect and implementation

jquery web element drag and drop plug-in effect and implementation_jquery

WBOY

Release： 2016-05-16 17:26:48

Original

1346 people have browsed it

jquery web element drag and drop plug-in effect and implementation_jquery

Copy code The code is as follows:

;(function($){
$.fn.extend ({
"jlzindex" : function(){ //Used to determine and set the z-index of each dialog box
var $dragindex = $(this);
var arrzindex = new array(); 
for(var i=0; i < $dragindex.length; i ){ //Initialize the array element value and set the z-index value in the order of drag items
var zidxnum = 10000 - i - i -2;
arrzindex[i] = {"getid":"drag" ($dragindex.length - i),"zidx":zidxnum};
$("#drag" ($dragindex.length - i)).css("z-index",zidxnum);
}
$dragindex.mousedown(function(){
var i = 0;
var dindex = 0;
 while(arrzindex[i]){ //Find the subscript of the currently clicked item in the array
if(arrzindex[i].getid == $(this).attr("id")){ diindex = i; }
i ;
}
for(var i = diindex; i >=0; i--){ //Move the clicked item to the first position in the array, and move other items back
 if(i > 0){
arrzindex[i].getid = arrzindex[i-1].getid;
$("#" arrzindex[i].getid).css("z-index" , arrzindex[i].zidx);
} else{
arrzindex[i].getid = $(this).attr("id");
$("#" arrzindex[i]. getid).css("z-index",arrzindex[i].zidx);
}
}
});
},
"jldraggable" : function(mod){ //Drag plug-in
var model = mod;
var draggable = false; 
var $drag = $(this);
$drag.find(".dragbar").mousedown(function (e){
draggable = true;
var mouseleft = e.pagex - $drag.find(".dragbar").offset().left; //The horizontal distance of the mouse in the drag area
var mousetop = e.pagey - $drag.find(".dragbar").offset().top; //The horizontal distance of the mouse in the drag area
if(model == "cfade"){ //The original position element is translucent
$drag.clone(false).appendto("body").addclass("dragshadow").fadeto(0,0.2).css("z-index",parseint($ drag.css("z-index")) - 1);
} else if(model == "dfade"){ //Follow the mouse element to be translucent
$drag.clone(false).appendto( "body").addclass("dragshadow").css("z-index",parseint($drag.css("z-index")) - 1);
$drag.fadeto(0,0.2) ;
}
$(document).mousemove(function(e){
if(draggable){
var winwidth = $(window).width();
var winheight = $ (window).height();
var dragleft = e.pagex - mouseleft;
var dragtop = e.pagey - mousetop;
//The drag box cannot exceed the window boundary
if(dragleft < 0){dragleft = 0;}
if(dragleft $drag.width() > winwidth){
dragleft = winwidth - $drag.width();
}
if( dragtop < 0){dragtop = 0;}
if(dragtop $drag.height() > winheight){
dragtop = winheight - $drag.height();
}
$ drag.css("left",dragleft "px");
$drag.css("top",dragtop "px");
} else{
return false;
}
});
});
$(document).mouseup(function(){
draggable = false;
$(".dragshadow").remove();
if (model == "dfade"){
$drag.fadeto(0,1); 
}
});
}
})
})(jquery)

index.html：

Copy code The code is as follows:

 No parameters

In-place translucent

Drag translucent