jQuery UI Draggable - Constrain movement

-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.' -

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 3263029b0..44c64f07e 100644 --- a/demos/draggable/cursor-style.html +++ b/demos/draggable/cursor-style.html @@ -1,27 +1,28 @@ - + jQuery UI Draggable - Cursor style - - - - - - - - - +

@@ -38,12 +39,11 @@

-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. -

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 b50c54ab1..7b6fd15ed 100644 --- a/demos/draggable/default.html +++ b/demos/draggable/default.html @@ -1,21 +1,21 @@ - + jQuery UI Draggable - Default functionality - - - - - - - - - @@ -29,12 +29,10 @@

-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. -

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 c997e28e2..444f5febe 100644 --- a/demos/draggable/delay-start.html +++ b/demos/draggable/delay-start.html @@ -1,27 +1,28 @@ - + jQuery UI Draggable - Delay start - - - - - - - - - +

@@ -34,12 +35,11 @@

-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. -

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 194598ffb..f7884007e 100644 --- a/demos/draggable/events.html +++ b/demos/draggable/events.html @@ -1,51 +1,53 @@ - + jQuery UI Draggable - Events - - - - - - - - - @@ -65,12 +67,10 @@

-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. -

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 16bd8a8d7..e7c0c650f 100644 --- a/demos/draggable/handle.html +++ b/demos/draggable/handle.html @@ -1,28 +1,29 @@ - + jQuery UI Draggable - Handles - - - - - - - - - +

@@ -38,11 +39,12 @@

+ +

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 65b900c91..0beda8e72 100644 --- a/demos/draggable/index.html +++ b/demos/draggable/index.html @@ -1,9 +1,9 @@ - + jQuery UI Draggable Demos - + diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html index 77b79599c..9d10f42c0 100644 --- a/demos/draggable/revert.html +++ b/demos/draggable/revert.html @@ -1,26 +1,27 @@ - + jQuery UI Draggable - Revert position - - - - - - - - - +

@@ -33,12 +34,11 @@

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

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 c7033b34e..560cb435e 100644 --- a/demos/draggable/scroll.html +++ b/demos/draggable/scroll.html @@ -1,27 +1,28 @@ - + jQuery UI Draggable - Auto-scroll - - - - - - - - - +

@@ -40,12 +41,11 @@

-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. -

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 a9ad84642..4859403ae 100644 --- a/demos/draggable/snap-to.html +++ b/demos/draggable/snap-to.html @@ -1,31 +1,32 @@ - + jQuery UI Draggable - Snap to element or grid - - - - - - - - - +

@@ -56,15 +57,12 @@

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 a87ddc0ef..c405e4825 100644 --- a/demos/draggable/sortable.html +++ b/demos/draggable/sortable.html @@ -1,35 +1,36 @@ - + jQuery UI Draggable + Sortable - - - - - - - - - - +

@@ -46,12 +47,11 @@

-Draggables are built to interact seamlessly with sortables. -

Draggables are built to interact seamlessly with sortables.

+ diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html index 4644472f0..5926374a3 100644 --- a/demos/draggable/visual-feedback.html +++ b/demos/draggable/visual-feedback.html @@ -1,37 +1,38 @@ - + jQuery UI Draggable - Visual feedback - - - - - - - - - +

With helpers:

@@ -65,12 +66,12 @@

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.

+ -- 2.39.5

Constrain movement along an axis:

With helpers: