jQuery UI Draggable Demos

From 303f20e1b3c977d75047bed1a3533a180d73fab5 Mon Sep 17 00:00:00 2001 From: Scott González Date: Mon, 10 Sep 2012 11:33:46 -0400 Subject: Demos: Cleanup. --- demos/draggable/constrain-movement.html | 33 +++++++++++---------------------- demos/draggable/cursor-style.html | 11 ++--------- demos/draggable/default.html | 11 ++--------- demos/draggable/delay-start.html | 11 ++--------- demos/draggable/events.html | 11 ++--------- demos/draggable/handle.html | 13 ++----------- demos/draggable/index.html | 32 ++++++++++++++------------------ demos/draggable/revert.html | 11 ++--------- demos/draggable/scroll.html | 11 ++--------- demos/draggable/snap-to.html | 11 ++--------- demos/draggable/sortable.html | 17 +++++------------ demos/draggable/visual-feedback.html | 11 ++--------- 12 files changed, 48 insertions(+), 135 deletions(-) (limited to 'demos/draggable') diff --git a/demos/draggable/constrain-movement.html b/demos/draggable/constrain-movement.html index 4e7c9f685..aa1d97508 100644 --- a/demos/draggable/constrain-movement.html +++ b/demos/draggable/constrain-movement.html @@ -1,4 +1,4 @@ - + @@ -16,6 +16,7 @@ #draggable { cursor: n-resize; } #draggable2 { cursor: e-resize; } #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; } + h3 { clear: left; } -

Constrain movement along an axis:

I can be dragged only vertically

@@ -42,28 +40,19 @@

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 the box

I'm contained within my parent

- - - -

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/cursor-style.html b/demos/draggable/cursor-style.html index 6dd31b51f..256071af8 100644 --- a/demos/draggable/cursor-style.html +++ b/demos/draggable/cursor-style.html @@ -1,4 +1,4 @@ - + @@ -23,8 +23,6 @@ -

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

@@ -37,13 +35,8 @@

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). Customize the cursor's appearance by supplying the cursor option with a valid CSS cursor value: default, move, pointer, crosshair, etc.

- + diff --git a/demos/draggable/default.html b/demos/draggable/default.html index 52d68d150..dc2a3d461 100644 --- a/demos/draggable/default.html +++ b/demos/draggable/default.html @@ -1,4 +1,4 @@ - + @@ -21,19 +21,12 @@ -

Drag me 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 index 63c997778..78dcdca13 100644 --- a/demos/draggable/delay-start.html +++ b/demos/draggable/delay-start.html @@ -1,4 +1,4 @@ - + @@ -23,8 +23,6 @@ -

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

@@ -33,13 +31,8 @@

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 efb659d25..95ae1adca 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -1,4 +1,4 @@ - + @@ -52,8 +52,6 @@ -

Drag me to trigger the chain of events.

@@ -65,13 +63,8 @@

- - -

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 8a2bfa008..4aed5827a 100644 --- a/demos/draggable/handle.html +++ b/demos/draggable/handle.html @@ -1,4 +1,4 @@ - + @@ -24,8 +24,6 @@ -

I can be dragged only by this handle

@@ -35,16 +33,9 @@

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

- - - - - -

Allow dragging only when the cursor is over a specific part of the draggable. Use the handle option to specify the jQuery selector of an element (or group of elements) used to drag the object.

Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the cancel option to specify a jQuery selector over which to "cancel" draggable functionality.

- + diff --git a/demos/draggable/index.html b/demos/draggable/index.html index 0beda8e72..93850684d 100644 --- a/demos/draggable/index.html +++ b/demos/draggable/index.html @@ -1,28 +1,24 @@ - + jQuery UI Draggable Demos - -

Examples

diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html index 6e656a2b0..b18190d84 100644 --- a/demos/draggable/revert.html +++ b/demos/draggable/revert.html @@ -1,4 +1,4 @@ - + @@ -22,8 +22,6 @@ -

Revert the original

@@ -32,13 +30,8 @@

Revert the helper

- - - -

Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option.

- + diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html index 611845631..8be467f49 100644 --- a/demos/draggable/scroll.html +++ b/demos/draggable/scroll.html @@ -1,4 +1,4 @@ - + @@ -23,8 +23,6 @@ -

Scroll set to true, default settings

@@ -39,13 +37,8 @@

- - -

Automatically scroll the document when the draggable is moved beyond the viewport. Set the scroll option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the scrollSensitivity and scrollSpeed options.

- + diff --git a/demos/draggable/snap-to.html b/demos/draggable/snap-to.html index fed879f82..a399db5d6 100644 --- a/demos/draggable/snap-to.html +++ b/demos/draggable/snap-to.html @@ -1,4 +1,4 @@ - + @@ -27,8 +27,6 @@ -

I'm a snap target

@@ -55,14 +53,9 @@

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 c8f2d545d..0bf674ff3 100644 --- a/demos/draggable/sortable.html +++ b/demos/draggable/sortable.html @@ -1,4 +1,4 @@ - + @@ -12,8 +12,8 @@