jquery Web要素のドラッグアンドドロッププラグイン効果とimplementation_jquery

コードをコピー コードは次のとおりです:

;(function($){
$. fn.extend ({
"jlzindex" : function(){ //各ダイアログ ボックスの Z インデックスを決定および設定するために使用されます
var $dragindex = $(this);
var arrzindex = new array();
for(var i=0; i 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;
varraggable = 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($rag.cs​​s("z-index")) - 1);
} else if(model == "dfade"){ //マウス要素をたどる半透明にする
$drag.clone(false).appendto( "body").addclass("dragshadow").css("z-index",parseint($drag.cs​​s("z-index")) - 1);
$drag.fadeto(0,0.2) ;
}
$(document).mousemove(function(e){
if(draggable){
var winwidth = $(window).width();
var winheight = $(window).height();
var ドラッグレフト = e.pagex - マウス左;
ヴァル ドラッグトップ = e.pagey - マウストップ;
//ドラッグ ボックスはウィンドウの境界を超えることはできません
if(dragleft if(dragleft $drag.width() > winwidth){
dragleft = winwidth - $drag.width();
}
if(dragtop if(dragtop $drag.height() > winheight){
dragtop = winheight - $drag.height();
}
$rag.cs​​s("left",dragleft "px");
$drag.cs​​s("top",dragtop "px");
} else{
return false;
}
});
});
$(document).mouseup(function(){
draggable = false;
$(".dragshadow").remove();
if (model == "dfade"){
$drag.fadeto(0,1);
}
};
}
})
})(jquery)

index.html：

コードをコピー コードは次のとおりです:

/ div>

インプレイス半透明

半透明でドラッグ