分享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>

精彩专题分享：JavaScript拖拽特效 jQuery拖拽特效

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。