jquery網頁元素拖拽插件效果及實現

更新時間：2013年08月05日 10:59:00 作者：

效果說明：配合已有css樣式，載入插件后，網頁元素可以隨意在窗口內拖拽，設置了原位置半透明和拖拽半透明的效果選項，可根據需要選擇。另外，當頁面上有多個可拖拽元素時，可以載入另外一個用于設置z-index的插件，模擬windows窗口點擊置頂效果。

復制代碼代碼如下:

;(function($){
$.fn.extend({
"jlzindex" : function(){ //用于判斷和設置各個對話框的z-index
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")){ 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; //鼠標在拖拽區(qū)域中的橫向距離
var mousetop = e.pagey - $drag.find(".dragbar").offset().top; //鼠標在拖拽區(qū)域中的橫向距離
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{
return false;
}
});
});
$(document).mouseup(function(){
draggable = false;
$(".dragshadow").remove();
if(model == "dfade"){
$drag.fadeto(0,1); 
}
});
}
})
})(jquery)

index.html：

復制代碼代碼如下:

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.jldraggable.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("#drag1").jldraggable(); //無參數，沒有影子
$("#drag2").jldraggable("cfade"); //cfade，定義原位置半透明陰影
$("#drag3").jldraggable("dfade"); //dfade，定義跟隨鼠標的半透明陰影
$(".dragindex").jlzindex(); //多個窗口的z-index處理
});
</script>
<style type="text/css">
.dragtitle{
width:120px;
height:27px;
background:url(images/drag_01.jpg);
cursor:move;
}
.dragcontent{
width:120px;
height:73px;
background:url(images/drag_02.jpg);
line-height:73px;
text-align:center;
}
#drag1{
width:120px; 
position:absolute; 
left:10px; 
top:10px;
}
#drag2{
width:120px; 
position:absolute; 
left:90px; 
top:90px;
}
#drag3{
width:120px; 
position:absolute; 
left:170px; 
top:170px;
}
</style>
<div id="drag1" class="dragindex">
<div class="dragbar dragtitle"></div>
<div class="dragcontent">無參數</div>
</div>
<div id="drag2" class="dragindex">
<div class="dragbar dragtitle"></div>
<div class="dragcontent">原位半透明</div>
</div>
<div id="drag3" class="dragindex">
<div class="dragbar dragtitle"></div>
<div class="dragcontent">拖拽半透明</div>
</div>