LigerDrag and ligerResizable sample code Packaging

LigerDrag ()
You can drag the target object.
Parameters
Handler
Drag can be triggered only in this area. It can be a string (jQuery selector) or a Dom jQuery object
OnStartDrag
Start dragging event
OnDrag
Drag event
OnStopDrag
End drag event

Example 1: Default Mode
Copy codeThe Code is as follows:
<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>

Copy codeThe Code is as follows:
<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>

Example 2: You can only drag the Panel header
Copy codeThe Code is as follows:
<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"> title </div>
</Div>

Copy codeThe Code is as follows:
$ (Function ()
{
$ ('# Rr1'). ligerDrag ({handler: '. header '});
});

Example 3: Set the onStartDrag event so that the current object is at the top layer
Copy codeThe Code is as follows:
Function changeZIndex (obj)
{
((Obj).css ("z-index", 2). siblings ("div" ).css ("z-index", 1 );
}
$ (Function ()
{
$ ('# Rr1, # rr3, # rr2'). ligerDrag ({
OnStartDrag: function (current)
{
ChangeZIndex(current.tar get [0]);
}
});
});

Example 4: make the object translucent when dragging
Copy codeThe Code is as follows:
. L-dragging {filter: alpha (opacity = 50); opacity: 0.50 ;}

Copy codeThe Code is as follows:
$ ('# Rr1, # rr3, # rr2'). ligerDrag ({
OnStartDrag: function (current)
{
Current.tar get. addClass ("l-dragging ");
},
OnStopDrag: function (current)
{
Current.tar get. removeClass ("l-dragging ");
}
});

Example 5: display the information when dragging
Copy codeThe Code is as follows:
<Div id = "message"> </div>

Copy codeThe Code is as follows:
$ ('# Rr1, # rr3, # rr2'). ligerDrag ({
OnDrag: function (current)
{
$ ("# Message" pai.html (
"Object:" + current.tar get. attr ("id") +
"<BR> X Mobile:" + current. diffX +
"<BR> Y Mobile:" + current. diffY );
},
OnStopDrag: function (current)
{
$ ("# Message" pai.html ("");
}
});

LigerResizable ()
So that the target object can be adjusted.
Parameters
Handles
You can adjust the size only in this region. String. N, e, s, w, ne, se, sw, and nw directions. You can select one or more directions. Separate them with commas.
OnStartResize
Start to resize events
OnResize
Resize events
OnStopResize
End resize event

Example 1: by default, no parameters are used. handles = 'n', e, s, w, ne, se, sw, nw'
Copy codeThe Code is as follows:
<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; ">

Copy codeThe Code is as follows:
<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>

Example 2: You can adjust the size only in the lower right corner.
Copy codeThe Code is as follows:
$ ('# Rr1'). ligerResizable ({handles: 'se '});

Example 2: Set the onStartResize, onResize, and onStopResize events
Copy codeThe Code is as follows:
$ ('# Rr1'). ligerResizable ({
OnStartResize: function (current, e)
{
$ ("# Message" cmd.html ("start ");
},
OnResize: function (current, e)
{
$ ("# Message" pai.html (
"Direction:" + current. dir +
"<BR> width:" + current. newWidth +
"<BR> height:" + current. newHeight );
},
OnStopResize: function (current, e)
{
$ ("# Message" cmd.html ("stop ");
}
});

Attached Demo download:
For more details visit: http://demo.jb51.net/js/2011/ligerUI/drag01.html