Default Value:
$. Extend ($. UI. draggable ,{
Version: "1.7.1 ″,
Eventprefix: "drag ",
Defaults :{
Addclasses: True,
Appendto: "parent ",
Axis: false,
Cancel: ": input, option ",
Connecttosortable: false,
Containment: false,
Cursor: "Auto ",
Cursorat: false,
Delay: 0,
Distance: 1,
Grid: false,
Handle: false,
Helper: "original ",
Iframefix: false,
Opacity: false,
Refreshpositions: false,
Revert: false,
Revertduration: 500,
Scope: "default ",
Scroll: True,
Scrollsensiti.pdf: 20,
Scrollspeed: 20,
Snap: false,
Snapmode: "both ",
Snaptolerance: 20,
STACK: false,
Zindex: false
}
});
========================================================== ================================
Default:
$ ("# Draggable"). draggable ();
========================================================== ================================
Events:
VaR $ start_counter = $ ('# event-start'), $ drag_counter = $ (' # event-drag '), $ stop_counter = $ (' # event-stop ');
VaR counts = [0, 0];
$ ("# Draggable"). draggable ({
Start: function (){
Counts [0] ++;
Updatecounterstatus ($ start_counter, counts [0]);
},
Drag: function (){
Counts [1] ++;
Updatecounterstatus ($ drag_counter, counts [1]);
},
Stop: function (){
Counts [2] ++;
Updatecounterstatus ($ stop_counter, counts [2]);
}
});
});
Function updatecounterstatus ($ event_counter, new_count ){
// First update the status into Ally...
If (! $ Event_counter.hasclass ('ui-state-Hover ')){
$ Event_counter.addclass ('ui-state-Hover ')
. Siblings (). removeclass ('ui-state-Hover ');
}
//... Then update the numbers
$ ('Span. count', $ event_counter). Text (new_count );
========================================================== ================================
Constrain-Movement (restricted range movement ):
$ ("# Draggable"). draggable ({axis: 'y '});// Restrict the Y axis
$ ("# Draggable2"). draggable ({axis: 'X'}); // restrict the X axis
$ ("# Draggable3"). draggable ({containment: '# containment-wrapper', scroll: false}); // No scroll bar appears
$ ("# Draggable4"). draggable ({containment: '# demo-frame '});
$ ("# Draggable5"). draggable ({containment: 'parent'}); // The limit is in the parent frame.
========================================================== ================================
Delay-start (delayed Movement ):
$ ("# Draggable"). draggable ({distance: 20}); // move 20 pixels to start dragging
$ ("# Draggable2"). draggable ({delay: 1000}); // drag after 1 second delay
========================================================== ================================
Snap-):
$ ("# Draggable"). draggable ({snap: true}); // default, adsorption in any way
$ ("# Draggable2"). draggable ({snap: '. UI-widget-header'}); // adsorption with the inner and outer diameter of an element
$ ("# Draggable3 ″). draggable ({snap :'. UI-widget-header ', snapmode: 'outer'}); // adsorption with the outer diameter of an element. Adsorption Method: upper and lower absorption, and lower absorption. inner Diameter adsorption: inner, adsorption method: opposite
$ ("# Draggable4"). draggable ({grid: [20, 20]}); // move at a certain distance
$ ("# Draggable5"). draggable ({grid: [80, 80]});
========================================================== ================================
Scroll:
$ ("# Draggable"). draggable ({scroll: true });
$ ("# Draggable2"). draggable ({scroll: True, scrollsensitiable: 100 });
// Scroll bar sensitivity
$ ("# Draggable3"). draggable ({scroll: True, scrollspeed: 100 });
// Scroll speed
========================================================== ================================
Revert position (restore to original position ):
$ ("# Draggable"). draggable ({revert: true });// Revert: True is set to restore to the location
$ ("# Draggable2"). draggable ({revert: True, helper: 'clone '});
// Helper: 'clone 'Copy and drag
========================================================== ================================
Visualfeedback (visual effect ):
$ ("# Draggable"). draggable ({helper: 'original '});
// Set not to copy (initialization setting)
$ ("# Draggable2"). draggable ({opacity: 0.7, helper: 'clone '}); // opacity sets transparency and clones Elements
$ ("# Draggable3"). draggable ({
Cursor: 'move ', // sets the mouse Image
Cursorat: {top:-12, left:-20}, // location coordinate settings
Helper: function (event ){
Return $ ('<Div class = "UI-widget-header"> I \'m a custom helper </div> ');
} // Create a prompt element with the cursor positioned above
});
$ ("# Set Div "). draggable ({Stack: {group: '# Set Div', Min:-1}); // drag group settings, the last added elements are superimposed on the top of the group. it is suitable for the wishing effect.
========================================================== ================================
Drag handle (drag point setting ):
$ ("# Draggable"). draggable ({handle: 'P'}); // set the drag position
$ ("# Draggable2"). draggable ({cancel: "P. UI-widget-header"}); // cancel sets a limit on the drag position
========================================================== ================================
Cursor style (mouse style ):
$ ("# Draggable "). draggable ({cursorat: {cursor: 'move ', top: 56, left: 56}); // cursor sets the mouse style, top, left, right, and bottom
$ ("# Draggable2"). draggable ({cursorat: {cursor: 'crosshair', top:-5, left:-5 }});
$ ("# Draggable3"). draggable ({cursorat: {bottom: 0 }});
========================================================== ==============================
Cursor style (mouse style ):
$ ("# Draggable "). draggable ({cursorat: {cursor: 'move ', top: 56, left: 56}); // cursor sets the mouse style, top, left, right, and bottom
========================================================== ================================
Draggable + sortable:
$ ("# Sortable"). sortable ({
Revert: True
});
$ ("# Draggable"). draggable ({
Connecttosortable: '# sortable', // you can drag it to another list.
Helper: 'clone ',
Revert: 'invalid'
});
Reference: http://blog.sina.com.cn/s/blog_48474ade0100exfg.html