jQuery UI Draggable - Constrain movement

From 02afd8a32edb13ea7fc2266ac80092ea15c0930c Mon Sep 17 00:00:00 2001 From: Alvin Li Date: Wed, 9 Oct 2013 15:52:53 +0800 Subject: * treat 'apps/utils' as regular django app; which used to store general tools for used in other apps * moved 'templatetags' from 'apps/indicator' to 'apps/utils' * '.gitignore' to ignore 'fixtures_bak' * moved js plugins from 'apps/indicator/static/plugins' to 'staticfiles/plugins' apps/recommend: * updated 'recommend.models'; o commented 'recommend.models.ResearchCombination' (not used) * implemented views 'add_edit_blog_info' and 'ajax_add_edit_configs'; * added pages 'templates/recommend/add_edit_blog_info.html', 'add_edit_blog_info_error.html'; o related css and javascripts files * added 'tools.py'; * added 'utils/tools.py' for placing generic functions; * deleted 'initial_data.json' (mv 'fixtures' to 'fixtures_bak'); * small fixes to 'indicator.models', 'sciblog.models' and 'sfaccount.views' * fixed automatically show 'proper_nouns' annotation in blog: recovered the line 'import signals' in 'sciblog.models' * added 'is_ok()' method for 'recommend.models.ResearchConfig'; --- .../demos/draggable/constrain-movement.html | 58 ++++++++++++++++++ .../jquery-ui/demos/draggable/cursor-style.html | 42 +++++++++++++ .../plugins/jquery-ui/demos/draggable/default.html | 32 ++++++++++ .../jquery-ui/demos/draggable/delay-start.html | 38 ++++++++++++ .../plugins/jquery-ui/demos/draggable/events.html | 70 ++++++++++++++++++++++ .../plugins/jquery-ui/demos/draggable/handle.html | 41 +++++++++++++ .../plugins/jquery-ui/demos/draggable/index.html | 24 ++++++++ .../plugins/jquery-ui/demos/draggable/revert.html | 37 ++++++++++++ .../plugins/jquery-ui/demos/draggable/scroll.html | 44 ++++++++++++++ .../plugins/jquery-ui/demos/draggable/snap-to.html | 61 +++++++++++++++++++ .../jquery-ui/demos/draggable/sortable.html | 50 ++++++++++++++++ .../jquery-ui/demos/draggable/visual-feedback.html | 70 ++++++++++++++++++++++ 12 files changed, 567 insertions(+) create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/constrain-movement.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/cursor-style.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/default.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/delay-start.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/events.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/handle.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/index.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/revert.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/scroll.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/snap-to.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/sortable.html create mode 100644 97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/visual-feedback.html (limited to '97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable') diff --git a/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/constrain-movement.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/constrain-movement.html new file mode 100644 index 0000000..b22e4c2 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/constrain-movement.html @@ -0,0 +1,58 @@ + + + + + jQuery UI Draggable - Constrain movement + + + + + + + + + + + + +

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 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/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/cursor-style.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/cursor-style.html new file mode 100644 index 0000000..05db5ea --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/cursor-style.html @@ -0,0 +1,42 @@ + + + + + jQuery UI Draggable - Cursor style + + + + + + + + + + + + +

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

+ + diff --git a/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/default.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/default.html new file mode 100644 index 0000000..3ea1640 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/default.html @@ -0,0 +1,32 @@ + + + + + jQuery UI Draggable - Default functionality + + + + + + + + + + + + +

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/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/delay-start.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/delay-start.html new file mode 100644 index 0000000..413814b --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/delay-start.html @@ -0,0 +1,38 @@ + + + + + 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/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/events.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/events.html new file mode 100644 index 0000000..d662e88 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/events.html @@ -0,0 +1,70 @@ + + + + + jQuery UI Draggable - Events + + + + + + + + + + + + +

+ +

Drag me to trigger the chain of events.

+ +

"start" invoked 0x
"drag" invoked 0x
"stop" invoked 0x

+ +

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/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/handle.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/handle.html new file mode 100644 index 0000000..983b653 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/handle.html @@ -0,0 +1,41 @@ + + + + + jQuery UI Draggable - Handles + + + + + + + + + + + + +

I can be dragged only by this handle

+ +

You can drag me around…

…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/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/index.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/index.html new file mode 100644 index 0000000..9385068 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/index.html @@ -0,0 +1,24 @@ + + + + + jQuery UI Draggable Demos + + + +

+ + + diff --git a/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/revert.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/revert.html new file mode 100644 index 0000000..8bedc06 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/revert.html @@ -0,0 +1,37 @@ + + + + + jQuery UI Draggable - Revert position + + + + + + + + + + + + +

Revert the original

+ +

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/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/scroll.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/scroll.html new file mode 100644 index 0000000..60737d3 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/scroll.html @@ -0,0 +1,44 @@ + + + + + jQuery UI Draggable - Auto-scroll + + + + + + + + + + + + +

Scroll set to true, default settings

+ +

scrollSensitivity set to 100

+ +

scrollSpeed set to 100

+ +

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/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/snap-to.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/snap-to.html new file mode 100644 index 0000000..efa6665 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/snap-to.html @@ -0,0 +1,61 @@ + + + + + jQuery UI Draggable - Snap to element or grid + + + + + + + + + + + + +

I'm a snap target

+ +
+ +

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

+ +

I snap to a 20 x 20 grid

+ +

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/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/sortable.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/sortable.html new file mode 100644 index 0000000..5604efd --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/sortable.html @@ -0,0 +1,50 @@ + + + + + jQuery UI Draggable + Sortable + + + + + + + + + + + + + +

Drag me down

+ +

Item 1
Item 2
Item 3
Item 4
Item 5

+ +

Draggables are built to interact seamlessly with sortables.

+ + diff --git a/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/visual-feedback.html b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/visual-feedback.html new file mode 100644 index 0000000..f5827c2 --- /dev/null +++ b/97suifangqa/staticfiles/plugins/jquery-ui/demos/draggable/visual-feedback.html @@ -0,0 +1,70 @@ + + + + + jQuery UI Draggable - Visual feedback + + + + + + + + + + + + +

With helpers:

+ +

Original

+ +

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.

+ + -- cgit v1.2.2