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

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