ligerDrag()
使目标对象可以拖动。
参数
handler
拖动的作用区域,在这个区域才可以触发拖动。可以是字符串(jQuery selector),也可以是一个Dom jQuery对象
onStartDrag
开始拖动事件
onDrag
拖动事件
onStopDrag
结束拖动事件
示例一:默认模式
< script src ="lib/jquery/jquery-1.3.2.min.js" type ="text/javascript" ></ script > < script src ="lib/ligerUI/js/plugins/ligerDrag.js" type ="text/javascript" ></ script > < script type ="text/javascript" > $( function () { $( ' #rr1,#rr3,#rr2 ' ).ligerDrag(); }); </ script >
< div id ="rr1" style ="width:200px;height:200px;top:230px; left:200px; background:#A6DBD8; z-index:1; position:absolute;" > </ div > < div id ="rr2" style ="width:140px;height:300px;top:40px; left:350px; background:#AFCCF1; z-index:2;position:absolute;" > </ div > < div id ="rr3" style ="width:200px;height:200px;top:150px; background:#DA9188; z-index:3;position:absolute;" > </ div >
示例二:只能在Panel头部进行拖动
< div id ="rr1" style ="width:200px;height:200px;top:130px; left:200px; background:#A6DBD8; z-index:1; position:absolute;" > < div class ="header" style ="height:30px; line-height:30px; background:#A1D1D1" > 标题 </ div > </ div >
$( function () { $( ' #rr1 ' ).ligerDrag({ handler: ' .header ' }); });
示例三:设置onStartDrag事件,使当前对象位于最顶层
function changeZIndex(obj) { $(obj).css( " z-index " , 2 ).siblings( " div " ).css( " z-index " , 1 ); } $( function () { $( ' #rr1,#rr3,#rr2 ' ).ligerDrag({ onStartDrag: function (current) { changeZIndex(current.target[ 0 ]); } }); });
示例四:使拖动时对象半透明
.l-dragging
{
filter
:
alpha(opacity=50)
;
opacity
:
0.50
;
}
$( ' #rr1,#rr3,#rr2 ' ).ligerDrag({ onStartDrag: function (current) { current.target.addClass( " l-dragging " ); }, onStopDrag: function (current) { current.target.removeClass( " l-dragging " ); } });
示例五:显示拖动时的信息
<
div
id
="message"
></
div
>
$( ' #rr1,#rr3,#rr2 ' ).ligerDrag({ onDrag: function (current) { $( " #message " ).html( " 对象: " + current.target.attr( " id " ) + " <BR>X移动: " + current.diffX + " <BR>Y移动: " + current.diffY); }, onStopDrag: function (current) { $( " #message " ).html( "" ); } });
ligerResizable()
使目标对象可以调整大小。
参数
handles
调整大小的作用区域,在这个区域才可以触发调整大小。字符串。包括n , e, s, w, ne, se, sw, nw这八个方向,可自由选择一个或多个,多个时用逗号隔开
onStartResize
开始调整大小事件
onResize
调整大小事件
onStopResize
结束调整大小事件
示例一:默认,不使用任何参数,这时handles='n , e, s, w, ne, se, sw, nw'
<
div
id
="rr1"
style
="width:200px;height:200px;top:230px; left:200px; background:#A6DBD8; z-index:1; position:absolute;"
>
</
div
>
<
div
id
="rr2"
style
="width:140px;height:300px;top:40px; left:350px; background:#AFCCF1; z-index:2;position:absolute;"
>
</
div
>
<
div
id
="rr3"
style
="width:200px;height:200px;top:150px; background:#DA9188; z-index:3;position:absolute;"
>
< link href ="lib/ligerUI/ligerui-resizable.css" rel ="stylesheet" type ="text/css" /> < script src ="lib/jquery/jquery-1.3.2.min.js" type ="text/javascript" ></ script > < script src ="lib/ligerUI/js/plugins/ligerResizable.js" type ="text/javascript" ></ script > < script type ="text/javascript" > $( function (){ $( ' #rr1,#rr2,#rr3 ' ).ligerResizable(); }); </ script >
示例二:只能在右下角才能调整大小
$( ' #rr1 ' ).ligerResizable({ handles: ' se ' });
示例二:设置onStartResize、onResize、onStopResize事件
$( ' #rr1 ' ).ligerResizable({ onStartResize: function (current, e) { $( " #message " ).html( " start " ); }, onResize: function (current, e) { $( " #message " ).html( " 方向: " + current.dir + " <BR>width: " + current.newWidth + " <BR>height: " + current.newHeight); }, onStopResize: function (current, e) { $( " #message " ).html( " stop " ); } });
最后附上Demo下载: 下载地址
更多细节可以访问: http://demo.ligerui.com/