jQuery UI Draggable

+ +

Constrain movement along an axis:

I can be dragged only vertically

I can be dragged only horizontally

- +

or to within another DOM element:

I'm contained within the box

+ +

I'm contained within the box's parent

+ +

I'm contained within my parent

-Define the boundaries of the draggable area. Set the axis option to limit the draggable's path to the x- or y-axis. Or use the containment option to specify a parent DOM element or a jQuery selector, like 'document.' +Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the axis option to limit the draggable's path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'

diff --git a/demos/draggable/containment_iframe.html b/demos/draggable/containment_iframe.html index c9eafdd11..7416afb10 100644 --- a/demos/draggable/containment_iframe.html +++ b/demos/draggable/containment_iframe.html @@ -8,7 +8,8 @@ + + + + + + + +

+ +

I will always stick to the center (relative to the mouse)

+ +

My cursor is at left -5 and top -5

+ +

My cursor position is only controlled for the 'bottom' value

+ +

+Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the cursorAt option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). +

+ +

+ + diff --git a/demos/draggable/default.html b/demos/draggable/default.html index b7425819c..0c219d58d 100644 --- a/demos/draggable/default.html +++ b/demos/draggable/default.html @@ -1,7 +1,7 @@ - jQuery UI Draggable - Default Demo + jQuery UI Draggable - Default functionality @@ -29,7 +29,7 @@

-The easiest way to make an element draggable. Hold down the mouse and drag it around. +Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

diff --git a/demos/draggable/delay-start.html b/demos/draggable/delay-start.html new file mode 100644 index 000000000..66d3e4893 --- /dev/null +++ b/demos/draggable/delay-start.html @@ -0,0 +1,41 @@ + + + + jQuery UI Draggable - Delay start + + + + + + + + + +

+ +

Only if you drag me by 20 pixels, the dragging will start

+ +

Regardless of the distance, you have to drag and wait for 1000ms before dragging starts

+ +

+Delay the start of dragging for a number of milliseconds with the delay option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the distance option. +

+ +

+ + diff --git a/demos/draggable/events.html b/demos/draggable/events.html index 98f2065a3..8d836bdbc 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -1,7 +1,7 @@ - jQuery UI Draggable - Events Demo + jQuery UI Draggable - Events @@ -65,7 +65,7 @@

- +Layer functionality onto the draggable using the start, drag, and stop events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.

diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html index ea53c09b8..bbaf3431b 100644 --- a/demos/draggable/handle.html +++ b/demos/draggable/handle.html @@ -1,19 +1,20 @@ - jQuery UI Draggable - Handle Demo + jQuery UI Draggable - Handles @@ -24,15 +25,19 @@

I can be dragged only by this handle

You can drag me around…

…but you can't drag me by this handle.

Default (snap: true), snaps to all other draggable elements

I only snap to the big box

I only snap to the outer edges of the bix box

I only snap to the inner edges of the big box

I snap to a 20 x 20 grid

I also snap to the big box but I'm very sticky because I have a high tolerance

I snap to a 80 x 80 grid

- - -

- -

Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap, snapMode (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.

+ +

Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.

diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html index 2649807b7..459434e09 100644 --- a/demos/draggable/sortable.html +++ b/demos/draggable/sortable.html @@ -1,7 +1,7 @@ - jQuery UI Draggable - Sortable Demo + jQuery UI Draggable + Sortable @@ -45,7 +45,7 @@

- +Draggables are built to interact seamlessly with sortables.

diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html index 333560567..23e342e92 100644 --- a/demos/draggable/visual-feedback.html +++ b/demos/draggable/visual-feedback.html @@ -1,19 +1,22 @@ - jQuery UI Draggable - Helper Demo + jQuery UI Draggable - Visual feedback

With helpers:

Original

Clone

Semi-transparent clone

Custom helper (in combination with cursorAt)

- +

Stacked:

We are draggables..

+ +

..whose z-indexes are controlled automatically..

+ +

..with the stack option.

- -

Provide feedback to users as they drag an object in the form of a helper. The helper option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the opacity option.

+ +

To clarify which draggable is in play, bring the draggable in motion to front. Use the zindex option to set a higher z-index for the helper, if in play, or use the stack option to ensure that the last item dragged will appear on top of others in the same group on drag stop.