Jquery-ui-draggable

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'

});