狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv
<span id="8pz7i"></span>
400 186 1886
OA教程
經驗分享
安裝指引
工作流
ERP教程
經驗分享
銷售管理
采購管理
生產管理
倉庫管理
工程管理
品質管理
財務管理
模切知識交流
經驗分享
技術文檔
PMS教程
CRM教程
開發文檔
其他文檔
MIS教程
MAS教程
EBR教程
企業管理
微信好文
讀書沙龍
無題
網站管理員
JQuery拖動插件 $(＇…＇).Drag()
當前位置：
點晴教程
→
知識管理交流
→
『 技術文檔交流 』
Ccoffee
2012年7月21日 15:18
本文熱度 3197
<SCRIPT type=text/javascript src="
>
<SCRIPT type=text/javascript src="
>
<P>功能配置參數：
<OL>
<LI><STRONG>MouseDown、MouseMove、MouseUp</STRONG>：鼠標點下、拖動中、放開后的二次開發接口；格式如function(e){/*this*/}，其中this等于拖動的目標對象。</LI>
<LI><STRONG>MoveObj：</STRONG>指定要拖動的目標JQuery對象，默認為觸發鼠標點下事件的元素。該配置參數可用來實現模擬窗體中點標題欄拖動整個窗口對象的實例。</LI>
<LI><STRONG>OffMod：</STRONG>虛線框開關默認為false（也就是默認啟用拖動虛線框防開鼠標后再對目標元素重新定位）。</LI>
<LI><STRONG>MoveInY</STRONG>、<STRONG>MoveInX</STRONG>：是否將拖動對象鎖定在Y軸或X軸上[true|false] 默認false，適用滑塊調節功能，后面在實現DIV+CSS模擬滾動條時有用到。</LI>
<LI><STRONG>BoxObj</STRONG>：拖拽元素的容器對象，若指定則只能在該對象元素的占位范圍內移動；僅當指定該屬性時候第一組屬性中的三個開發接口中可直接用this.InBox或this.OverBox來判斷拖動目標是否在<STRONG>BoxObj</STRONG>內或是否已經觸碰到了<STRONG>BoxObj</STRONG>。</LI>
<LI><STRONG>BindInBox：</STRONG>綁定到容器中，默認為true；指定了屬性<STRONG>BoxObj</STRONG>只是為了使用this.InBox或this.OverBox，而并不想將拖動目標元素的移動區域限制在<STRONG>BoxObj</STRONG>內部，那么將該屬性設置為false就可以了。</LI></OL>
<P>上面這么語無倫次的配置說明估計也是看的云里霧里了，直接看下面演示就可以明確各屬性的意義了，請點各個框框下的操作按鈕開啟或關閉拖動功能：</P>
<P></P>1. 藍框框：沒進行任何屬性配置。
<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>這是個藍框框，他的拖動綁定沒有進行任何配置，具備默認的偽拖動對象、整頁遮罩。</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綁上拖動功能：$('#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的拖動功能：$('#DivTest1').UnDrag();" type=button> </P>2. 棕框框：關閉了拖動時候的頁面遮罩（OffMask: true）；關閉了拖動時的虛線框（OffMod: true），直接拖動目標對象；指定了目標可移動范圍（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>這是個被悲慘的局限在紅框里的棕框框</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綁上拖動功能：$('#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的拖動功能：$('#DivTest2').UnDrag();" type=button> </P>
<P>3. 黃框框：指定了目標移動范圍對象（BoxObj:$('#RedDiv')）；并且不將其可移動范圍限定到目標范圍內（BindInBox: false）；對拖動過程進行了擴展開發（MouseMove:function(){this.html(this.InBox?'在RedDiv范圍內':this.OverBox?'碰到RedDiv了':'在RedDiv范圍外部');}），該開發效果可用于進行購物車拖放開發。</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>拖動到上面紅色區域看看</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范圍內':this.OverBox?'碰到RedDiv了':'在RedDiv范圍外部');}});$(this).css('color','#000');$('#testOn3').css('color','#666');" value="為DivTest3綁上拖動功能：$('#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的拖動功能：$('#DivTest3').UnDrag();" type=button>
<P>4.坐標軸限制：指定了橫向限制（MoveInX:true），使目標元素只能縱向移動。</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>只能縱向移動了</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綁上拖動功能 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的拖動功能：$('#DivTest4').UnDrag();" type=button>
<P>5.窗體：指定了移動對象（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綁上拖動功能 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的拖動功能：$('#DivTest5').UnDrag();" type=button>
<P>6.更多效果可對屬性進行自定義組合，或對各開發接口進行擴展開發。</P>
該文章在 2012/7/21 15:18:50 編輯過
關鍵字查詢
插件
拖動
相關文章
正在查詢...
Copyright 2010-2025
ClickSun
All Rights Reserved
2012年7月21日 15:18
本文熱度 3197
400 186 1886
