LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

JQuery拖動(dòng)插件 $(＇…＇).Drag()

Ccoffee
2012年7月21日 15:18 本文熱度 3296
<SCRIPT type=text/javascript src=">
<SCRIPT type=text/javascript src=">
<P>功能配置參數(shù)：
<OL>
<LI><STRONG>MouseDown、MouseMove、MouseUp</STRONG>：鼠標(biāo)點(diǎn)下、拖動(dòng)中、放開后的二次開發(fā)接口；格式如function(e){/*this*/}，其中this等于拖動(dòng)的目標(biāo)對(duì)象。</LI>
<LI><STRONG>MoveObj：</STRONG>指定要拖動(dòng)的目標(biāo)JQuery對(duì)象，默認(rèn)為觸發(fā)鼠標(biāo)點(diǎn)下事件的元素。該配置參數(shù)可用來實(shí)現(xiàn)模擬窗體中點(diǎn)標(biāo)題欄拖動(dòng)整個(gè)窗口對(duì)象的實(shí)例。</LI>
<LI><STRONG>OffMod：</STRONG>虛線框開關(guān)默認(rèn)為false（也就是默認(rèn)啟用拖動(dòng)虛線框防開鼠標(biāo)后再對(duì)目標(biāo)元素重新定位）。</LI>
<LI><STRONG>MoveInY</STRONG>、<STRONG>MoveInX</STRONG>：是否將拖動(dòng)對(duì)象鎖定在Y軸或X軸上[true|false] 默認(rèn)false，適用滑塊調(diào)節(jié)功能，后面在實(shí)現(xiàn)DIV+CSS模擬滾動(dòng)條時(shí)有用到。</LI>
<LI><STRONG>BoxObj</STRONG>：拖拽元素的容器對(duì)象，若指定則只能在該對(duì)象元素的占位范圍內(nèi)移動(dòng)；僅當(dāng)指定該屬性時(shí)候第一組屬性中的三個(gè)開發(fā)接口中可直接用this.InBox或this.OverBox來判斷拖動(dòng)目標(biāo)是否在<STRONG>BoxObj</STRONG>內(nèi)或是否已經(jīng)觸碰到了<STRONG>BoxObj</STRONG>。</LI>
<LI><STRONG>BindInBox：</STRONG>綁定到容器中，默認(rèn)為true；指定了屬性<STRONG>BoxObj</STRONG>只是為了使用this.InBox或this.OverBox，而并不想將拖動(dòng)目標(biāo)元素的移動(dòng)區(qū)域限制在<STRONG>BoxObj</STRONG>內(nèi)部，那么將該屬性設(shè)置為false就可以了。</LI></OL>
<P>上面這么語無倫次的配置說明估計(jì)也是看的云里霧里了，直接看下面演示就可以明確各屬性的意義了，請(qǐng)點(diǎn)各個(gè)框框下的操作按鈕開啟或關(guān)閉拖動(dòng)功能：</P>
<P></P>1. 藍(lán)框框：沒進(jìn)行任何屬性配置。
<DIV style="BORDER-BOTTOM: #1f67c9 1px solid; BORDER-LEFT: #1f67c9 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; WIDTH: 200px; PADDING-RIGHT: 10px; BACKGROUND: #ebf1fc; HEIGHT: 80px; FONT-SIZE: 14px; BORDER-TOP: #1f67c9 1px solid; BORDER-RIGHT: #1f67c9 1px solid; PADDING-TOP: 10px" id=DivTest1>DivTest1：<BR>這是個(gè)藍(lán)框框，他的拖動(dòng)綁定沒有進(jìn)行任何配置，具備默認(rèn)的偽拖動(dòng)對(duì)象、整頁遮罩。</DIV>
<P><INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOff1 onclick="$('#DivTest1').Drag();$(this).css('color','#000');$('#testOn1').css('color','#666');" value="為DivTest1綁上拖動(dòng)功能：$('#DivTest1').Drag();" type=button> <INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOn1 onclick="$('#DivTest1').UnDrag();$(this).css('color','#000');$('#testOff1').css('color','#666');" value="注銷DivTest1的拖動(dòng)功能：$('#DivTest1').UnDrag();" type=button> </P>2. 棕框框：關(guān)閉了拖動(dòng)時(shí)候的頁面遮罩（OffMask: true）；關(guān)閉了拖動(dòng)時(shí)的虛線框（OffMod: true），直接拖動(dòng)目標(biāo)對(duì)象；指定了目標(biāo)可移動(dòng)范圍（BoxObj:'parent'），將其限定在棕框框的父容器中。
<DIV style="BORDER-BOTTOM: #e24363 1px solid; BORDER-LEFT: #e24363 1px solid; BACKGROUND: #fff0f0; HEIGHT: 130px; BORDER-TOP: #e24363 1px solid; BORDER-RIGHT: #e24363 1px solid" id=RedDiv>
<DIV style="BORDER-BOTTOM: #995715 1px solid; BORDER-LEFT: #995715 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; WIDTH: 100px; PADDING-RIGHT: 10px; BACKGROUND: #f2e3d7; HEIGHT: 80px; FONT-SIZE: 14px; BORDER-TOP: #995715 1px solid; BORDER-RIGHT: #995715 1px solid; PADDING-TOP: 10px" id=DivTest2>DivTest2：<BR>這是個(gè)被悲慘的局限在紅框里的棕框框</DIV></DIV>
<P><INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOff2 onclick="$('#DivTest2').Drag({ OffMask: true, OffMod: true, BoxObj:'parent'});$(this).css('color','#000');$('#testOn2').css('color','#666');" value="為DivTest2綁上拖動(dòng)功能：$('#DivTest2').Drag({ OffMask: true, OffMod: true, BoxObj:'parent'});" type=button> <INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOn2 onclick="$('#DivTest2').UnDrag();$(this).css('color','#000');$('#testOff2').css('color','#666');" value="注銷DivTest2的拖動(dòng)功能：$('#DivTest2').UnDrag();" type=button> </P>
<P>3. 黃框框：指定了目標(biāo)移動(dòng)范圍對(duì)象（BoxObj:$('#RedDiv')）；并且不將其可移動(dòng)范圍限定到目標(biāo)范圍內(nèi)（BindInBox: false）；對(duì)拖動(dòng)過程進(jìn)行了擴(kuò)展開發(fā)（MouseMove:function(){this.html(this.InBox?'在RedDiv范圍內(nèi)':this.OverBox?'碰到RedDiv了':'在RedDiv范圍外部');}），該開發(fā)效果可用于進(jìn)行購物車拖放開發(fā)。</P>
<DIV style="BORDER-BOTTOM: #ecec00 1px solid; BORDER-LEFT: #ecec00 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; WIDTH: 100px; PADDING-RIGHT: 10px; BACKGROUND: #ffffe6; HEIGHT: 80px; FONT-SIZE: 14px; BORDER-TOP: #ecec00 1px solid; BORDER-RIGHT: #ecec00 1px solid; PADDING-TOP: 10px" id=DivTest3>DivTest3：<BR><BR>拖動(dòng)到上面紅色區(qū)域看看</DIV><INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOff3 onclick="$('#DivTest3').Drag({OffMask: true,BoxObj:$('#RedDiv'), BindInBox: false,MouseMove:function(){$(this).html(this.InBox?'在RedDiv范圍內(nèi)':this.OverBox?'碰到RedDiv了':'在RedDiv范圍外部');}});$(this).css('color','#000');$('#testOn3').css('color','#666');" value="為DivTest3綁上拖動(dòng)功能：$('#DivTest3').Drag({BoxObj:$('#RedDiv'), BindInBox: false,OffMod:true,MouseMove:…});" type=button> <INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOn3 onclick="$('#DivTest3').UnDrag();$(this).css('color','#000');$('#testOff3').css('color','#666');" value="注銷DivTest3的拖動(dòng)功能：$('#DivTest3').UnDrag();" type=button>
<P>4.坐標(biāo)軸限制：指定了橫向限制（MoveInX:true），使目標(biāo)元素只能縱向移動(dòng)。</P>
<DIV style="BORDER-BOTTOM: #666 1px solid; BORDER-LEFT: #666 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; WIDTH: 100px; PADDING-RIGHT: 10px; BACKGROUND: #eee; HEIGHT: 80px; FONT-SIZE: 14px; BORDER-TOP: #666 1px solid; BORDER-RIGHT: #666 1px solid; PADDING-TOP: 10px" id=DivTest4>DivTest4：<BR><BR>只能縱向移動(dòng)了</DIV><INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOff4 onclick="$('#DivTest4').Drag({MoveInX:true,OffMod:true});$(this).css('color','#000');$('#testOn4').css('color','#666');" value=為DivTest4綁上拖動(dòng)功能 type=button> <INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOn4 onclick="$('#DivTest4').UnDrag();$(this).css('color','#000');$('#testOff4').css('color','#666');" value="注銷DivTest4的拖動(dòng)功能：$('#DivTest4').UnDrag();" type=button>
<P>5.窗體：指定了移動(dòng)對(duì)象（MoveObj:'parent'）。</P>
<div style="border:#0066CC solid 1px; background:#D9F3FD; width:100px; height:60px;">
<div id="DivTest5" style="background:#FCFEFE; cursor:pointer;">TITLE:DivTest5</div>aaaa
</div>
<INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOff5 onclick="$('#DivTest5').Drag({MoveObj:'parent',OffMod:true,OffMask:true});$(this).css('color','#000');$('#testOn5').css('color','#666');" value=為DivTest5綁上拖動(dòng)功能 type=button> <INPUT style="WIDTH: 70%; BACKGROUND: #fff; COLOR: #666" id=testOn5 onclick="$('#DivTest4').UnDrag();$(this).css('color','#000');$('#testOff5').css('color','#666');" value="注銷DivTest5的拖動(dòng)功能：$('#DivTest5').UnDrag();" type=button>
<P>6.更多效果可對(duì)屬性進(jìn)行自定義組合，或?qū)Ω鏖_發(fā)接口進(jìn)行擴(kuò)展開發(fā)。</P>

該文章在 2012/7/21 15:18:50 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved

黄频国产免费高清视频,久久不卡精品中文字幕一区,激情五月天AV电影在线观看,欧美国产韩国日本一区二区
亚欧国产日韩欧美在线观看 | 思久96热在精品国产 | 在线中文字幕亚洲无线码 | 日本精油按摩一区二区 | 日韩电影免费在线观看视频 | 中文字幕日本一区久久 |