Jquery UI-draggable parameter set

Draggable
Library File: UI/UI. Core. JS, UI/UI. draggable. js
========================================================== ================================
Default:
$ ("# Draggable"). draggable ();
========================================================== ================================
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 a 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 $ ('
I \'m a custom helper
');
} // 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'
});