jQuery網頁元素拖拽插件

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

js/jquery.jLdraggable.js：

;(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;    //滑鼠在拖拽區域中的橫向距離
                    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{
                            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>