jQuery LigerUI plug-in introduction and use of ligerDrag and ligerResizable sample code packaging_jquery

ligerDrag()
Makes the target object draggable.
Parameters
handler
The area of ​​dragging. Dragging can be triggered only in this area. It can be a string (jQuery selector) or a Dom jQuery object
onStartDrag
Start drag event
onDrag
Drag event
onStopDrag
End drag event

Example 1: Default mode

Copy code The code is as follows:

Copy code The code is as follows:

Example 2: Dragging can only be done at the head of the Panel

Copy code The code is as follows:

title

Copy code The code is as follows:

$(function ()
{
$('#rr1').ligerDrag({ handler: '.header' } ;

The 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.target[0]);
}
});
});


Example 4: Make the object translucent when dragging




Copy the code


The code is as follows:

. l-dragging{filter:alpha(opacity=50);opacity:0.50; }

Copy code

The code is as follows:

$('#rr1,#rr3,#rr2').ligerDrag({

onStartDrag: function (current) { current.target.addClass ("l-dragging"); }, onStopDrag: function (current) { current.target.removeClass("l-dragging");

}

} ; 🎜>

Copy code

The code is as follows:

$('#rr1,#rr3,#rr2').ligerDrag({ onDrag: function (current) { $("#message").html( "Object:" current.target.attr("id") "
X move:" current.diffX "
Y move: " current.diffY);

},

onStopDrag: function (current)
{
$("#message").html("");

}
});

ligerResizable()
Makes the target object resizable.
Parameters
Handles
The resizing area, in which resizing can be triggered. String. Including eight directions: n, e, s, w, ne, se, sw, nw. You can freely select one or more. If there are multiple, separate them with commas
onStartResize
Start resizing event
onResize
　Resize event
onStopResize
　End resize event

Example 1: By default, no parameters are used, then handles='n, e, s, w, ne, se, sw, nw'

Copy code The code is as follows:

Copy code The code is as follows:

Example 2: Resize can only be done in the lower right corner

Copy code The code is as follows:

$('#rr1').ligerResizable({ handles: 'se' });

Example 2: Set onStartResize, onResize, onStopResize events

Copy code The code is as follows:

$('#rr1').ligerResizable({
onStartResize: function (current, e)
{
$("#message").html("start");
},
onResize: function (current, e)
{
$("#message" ).html(
"direction:" current.dir
"
width:" current.newWidth
"
height:" current.newHeight);
},
onStopResize: function (current, e)
{
$("#message").html("stop");
}
});

Finally attached is the Demo download: Download address
For more details, please visit: http://demo.jb51.net/js/2011/ligerUI/drag01.html

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn