分享jQuery网页元素拖拽插件
编程学习 2021-07-04 19:59www.dzhlxh.cn编程入门
这篇文章主要介绍了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>
精彩专题分享：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。