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

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

WBOY

Release： 2016-05-16 18:08:40

Original

1152 people have browsed it

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
jQuery LigerUI plug-in introduction and use of ligerDrag and ligerResizable sample code packaging_jquery
Example 1: Default mode

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:

 
$(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
jQuery LigerUI plug-in introduction and use of ligerDrag and ligerResizable sample code packaging_jquery

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

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:

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