JQuery ui-draggable Parameters

Draggable

Library files: ui/ui.core.js, ui/ui.draggable.js

============================================================

Default:

$ ("#draggable"). Draggable ();

============================================================

Constrain-movement (Restricted range Move):

$ ("#draggable"). Draggable ({axis: ' y '}); Limit y axis

$ ("#draggable2 ″). Draggable ({axis: ' x '}); Limit x axis

$ ("#draggable3 ″"). Draggable ({containment: ' #containment-wrapper ', scroll:false}); Scroll bar does not appear

$ ("#draggable4 ″). Draggable ({containment: ' #demo-frame '});

$ ("#draggable5 ″). Draggable ({containment: ' parent '}); Limit in the parent frame

============================================================

Delay-start (Delay Move):

$ ("#draggable"). Draggable ({distance:20}); Move 20 pixels to start dragging

$ ("#draggable2 ″). draggable ({delay:1000});//delay 1 seconds and start dragging

============================================================

Snap-to (Adsorption movement):

$ ("#draggable"). Draggable ({snap:true}); By default, any way to adsorb

$ ("#draggable2 ″). Draggable ({snap: '. Ui-widget-header '}); Adsorbed by the inner and outer diameter of an element

$ ("#draggable3 ″). Draggable ({snap: '. Ui-widget-header ', Snapmode: ' outer '}); To an element outside the outer diameter adsorption, adsorption mode: The bottom of the suction, the bottom suction on it. Inner diameter adsorption: inner, adsorption mode: 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, scrollsensitivity:100}); scroll bar Sensitivity

$ ("#draggable3 ″). draggable ({scroll:true, scrollspeed:100}); Scrolling speed

============================================================

Revert position (revert to original location):

$ ("#draggable"). Draggable ({revert:true}); Revert:true set to restore to location

$ ("#draggable2 ″)." Draggable ({revert:true, helper: ' Clone '}); Helper: ' Clone ' copy drag

============================================================

Visualfeedback (visual effects):

$ ("#draggable"). Draggable ({helper: ' original '}); Settings do not replicate (initialization settings)

$ ("#draggable2 ″)." Draggable ({opacity:0.7, helper: ' Clone '}); Opacity set transparency and clone elements

$ ("#draggable3 ″). draggable ({

Cursor: ' move ',//Set mouse graphics

Cursorat: {top: -12, left:-20},//position location coordinates set

Helper:function (event) {

Return $ ('

I ' m a custom helper

');

//Create a new hint element with the mouse position value set

});

$ ("#set div"). Draggable ({stack: {group: ' #set div ', min:-1}});//Group settings drag, and the last added element is superimposed on the top of the group. Suitable for making a wish plate effect.

============================================================

Drag handle (drag point setting):

$ ("#draggable"). Draggable ({handle: ' P '}); Handle settings Implement drag location

$ ("#draggable2 ″). Draggable ({cancel:" P.ui-widget-header "}); Cancel set Limit drag position

============================================================

Cursor style (mouse style):

$ ("#draggable"). Draggable ({cursorat: {cursor: ' move ', top:56, left:56}}); Cursor sets the mouse style, top, left, right, bottom set elements relative to the mouse positioning point

$ ("#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, bottom set elements relative to the mouse positioning point

============================================================

Draggable+sortable:

$ ("#sortable"). Sortable ({

Revert:true

});

$ ("#draggable"). Draggable ({

Connecttosortable: ' #sortable ',//Set Drag to add to other list

Helper: ' Clone ',

revert: ' Invalid '

});