jquery網頁元素拖曳外掛效果及實作_jquery

複製程式碼 程式碼如下:

;(function($){
$.fn.extend ({
"jlzindex" : function(){ //用於判斷和設定各個對話框的z-index
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")){ dindex = i;}
i ;
}
for(var i = dindex; 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.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 dragleft = e.pagex - mouseleft;
var dragtop = e.pagey - mousetop;
//拖曳框不能超出視窗邊界
if(dragleft if(dragleft $drag.width() > winwidth){
dragleft = winwidth - $drag.width();
}
if(dragtop if(dragtop $drag.height() > winheight){
dragtop = winheight - $drag.height();
}
$drag.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>

拖曳半透明