成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

效果說明：配合已有CSS樣式，載入插件后，網(wǎng)頁元素可以隨意在窗口內(nèi)拖拽，設(shè)置了原位置半透明和拖拽半透明的效果選項(xiàng)，可根據(jù)需要選擇。另外，當(dāng)頁面上有多個(gè)可拖拽元素時(shí)，可以載入另外一個(gè)用于設(shè)置z-index的插件，模擬Windows窗口點(diǎn)擊置頂效果。

js/jquery.jLdraggable.js：

;(function($){
 $.fn.extend({
  "jLzindex" : function(){ //用于判斷和設(shè)置各個(gè)對(duì)話框的z-index
  var $dragIndex = $(this);
  var arrzIndex = new Array();
  for(var i=0; i < $dragIndex.length; i++){ //初始化數(shù)組元素值，并按拖拽項(xiàng)順序設(shè)置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]){ //找到當(dāng)前點(diǎn)擊項(xiàng)在數(shù)組里的下標(biāo)
   if(arrzIndex[i].getId == $(this).attr("id")){ dIndex = i;}
   i++;
   }
   for(var i = dIndex; i >=0; i--){ //把點(diǎn)擊項(xiàng)移至數(shù)組第一位，其他項(xiàng)后移
   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; //鼠標(biāo)在拖拽區(qū)域中的橫向距離
   var mouseTop = e.pageY - $drag.find(".dragBar").offset().top; //鼠標(biāo)在拖拽區(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"){ //跟隨鼠標(biāo)元素半透明
   $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="http://www.gimoo.net/t/1902/js/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery.jLdraggable.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
 $("#drag1").jLdraggable(); //無參數(shù)，沒有影子
 $("#drag2").jLdraggable("cFade"); //cFade，定義原位置半透明陰影
 $("#drag3").jLdraggable("dFade"); //dFade，定義跟隨鼠標(biāo)的半透明陰影
 $(".dragIndex").jLzindex(); //多個(gè)窗口的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">無參數(shù)</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>

精彩專題分享：JavaScript拖拽特效 jQuery拖拽特效

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持綠夏網(wǎng)。