<SCRIPT type=text/javascript src="http://www.pyzy.net/Demo/jquery/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://www.pyzy.net/Demo/jquery/my_jquery_extend_1.0.0.js"></SCRIPT>
<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 编辑过