JQuery ui-draggable Parameters

Source: Internet
Author: User
Tags relative

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 '

});

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.