分享jQuery網頁元素拖拽插件
效果說明:配合已有CSS樣式,載入插件后,網頁元素可以隨意在窗口內拖拽,設置了原位置半透明和拖拽半透明的效果選項,可根據(jù)需要選擇。另外,當頁面上有多個可拖拽元素時,可以載入另外一個用于設置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++){ //初始化數(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]){ //找到當前點擊項在數(shù)組里的下標
if(arrzIndex[i].getId == $(this).attr("id")){ dIndex = i;}
i++;
}
for(var i = dIndex; i >=0; i--){ //把點擊項移至數(shù)組第一位,其他項后移
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(); //無參數(shù),沒有影子
$("#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">無參數(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拖拽特效
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
為什么要在引入的css或者js文件后面加參數(shù)的詳細講解
為什么要在引入的css或者js文件后面加參數(shù)的詳細講解,需要的朋友可以參考一下2013-05-05
Jquery 跨域訪問 Lightswitch OData Service的方法
修改lightswitch .server project web.config。添加如下內容就可以實現(xiàn)對ApplicationData.svc/跨域訪問2013-09-09
jQuery prototype沖突的2種解決方法(附demo示例下載)
這篇文章主要介紹了jQuery prototype沖突的2種解決方法,分析了針對jQuery中添加代碼與沖突位置添加代碼2種情況,并附帶demo示例供讀者下載參考,需要的朋友可以參考下2016-01-01
jquery操作checkbox火狐下第二次無法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無法勾選問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10
jquery動態(tài)賦值id與動態(tài)取id方法示例
這篇文章主要給大家介紹了關于jquery動態(tài)賦值id與動態(tài)取id的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面跟著小編來一起學習學習吧。2017-08-08

