jquery 웹 요소 드래그 앤 드롭 플러그인 효과 및implementation_jquery

코드 복사 코드는 다음과 같습니다.

;(function($){
$. fn.extend ({
"jlzindex" : function(){ //각 대화 상자의 Z-인덱스를 결정하고 설정하는 데 사용됩니다.
var $dragindex = $(this);
var arrzindex = new array();
for(var i=0; i < $dragindex.length; i ){ //배열 요소 값을 초기화하고 드래그 항목 순서대로 z-index 값을 설정합니다.
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]){ //배열에서 현재 클릭한 항목의 첨자를 찾습니다
if(arrzindex[i].getid == $(this).attr("id" )){ diindex = i; }
i ;
}
for(var i = diindex; i >=0; i--){ //클릭한 항목을 첫 번째 위치로 이동합니다. 배열하고 다른 항목을 뒤로 이동
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){ //드래그 플러그인
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; / /드래그 영역에서 마우스의 수평 거리
var mousetop = e.pagey - $drag.find(".dragbar").offset().top; //드래그 영역에서 마우스의 수평 거리
if(model == "cfade"){ //원래 위치 요소는 반투명입니다
$drag.clone(false).appendto("body").addclass("dragshadow").fadeto(0, 0.2).css("z-index",parseint($ drag.css("z-index")) - 1);
} else if(model == "dfade"){ //마우스 요소를 따릅니다. 반투명하게
$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;
//드래그 상자는 창 경계를 초과할 수 없습니다
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{
false 반환;
}
});
});
$(document).mouseup(function(){
draggable = false;
$(".dragshadow").remove();
if (model == "dfade"){
$drag.fadeto(0,1)
}
});
}
})
})(jquery)

index.html：

코드 복사 코드는 다음과 같습니다.