JQuery UI-Draggable Parameters

JQuery UI-Draggable Parameters

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'

});