分享jQuery網(wǎng)頁元素拖拽插件
效果說明:配合已有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="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,定義跟隨鼠標(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í)有所幫助,也希望大家多多支持腳本之家。
- Jquery UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作
- jQuery實(shí)現(xiàn)拖拽頁面元素并將其保存到cookie的方法
- jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變?cè)卮笮〉姆椒?附demo源碼下載)
- jQuery實(shí)現(xiàn)元素拖拽并cookie保存順序的方法
- jQuery實(shí)現(xiàn)html元素拖拽
- jquery網(wǎng)頁元素拖拽插件效果及實(shí)現(xiàn)
- JQuery拖拽元素改變大小尺寸實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
- jQuery 版元素拖拽原型代碼
- jQuery實(shí)現(xiàn)容器間的元素拖拽功能
相關(guān)文章
為什么要在引入的css或者js文件后面加參數(shù)的詳細(xì)講解
為什么要在引入的css或者js文件后面加參數(shù)的詳細(xì)講解,需要的朋友可以參考一下2013-05-05jquery簡(jiǎn)單實(shí)現(xiàn)帶漸顯效果的選項(xiàng)卡菜單代碼
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)帶漸顯效果的選項(xiàng)卡菜單代碼,可實(shí)現(xiàn)tab選項(xiàng)卡切換過程中帶有漸顯效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09Jquery 跨域訪問 Lightswitch OData Service的方法
修改lightswitch .server project web.config。添加如下內(nèi)容就可以實(shí)現(xiàn)對(duì)ApplicationData.svc/跨域訪問2013-09-09jQuery prototype沖突的2種解決方法(附demo示例下載)
這篇文章主要介紹了jQuery prototype沖突的2種解決方法,分析了針對(duì)jQuery中添加代碼與沖突位置添加代碼2種情況,并附帶demo示例供讀者下載參考,需要的朋友可以參考下2016-01-01jquery操作checkbox火狐下第二次無法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無法勾選問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10jquery動(dòng)態(tài)賦值id與動(dòng)態(tài)取id方法示例
這篇文章主要給大家介紹了關(guān)于jquery動(dòng)態(tài)賦值id與動(dòng)態(tài)取id的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08