jQuery UI Sortable - Delay / Distance Demo

From d578a66d49f0779de7d99b68d35d97e5600d3167 Mon Sep 17 00:00:00 2001 From: Richard Worth Date: Tue, 20 Jan 2009 13:12:22 +0000 Subject: [PATCH] demos/sortable: some cleanup and consistency --- demos/sortable/connect-lists.html | 11 +++- demos/sortable/connectwith.html | 52 ---------------- demos/sortable/default.html | 8 ++- demos/sortable/delay-start.html | 26 +++++--- demos/sortable/delay.html | 46 --------------- demos/sortable/display-grid.html | 5 +- demos/sortable/display-portlets.html | 88 ---------------------------- demos/sortable/distance.html | 46 --------------- demos/sortable/droponempty.html | 62 -------------------- demos/sortable/droppable.html | 55 ----------------- demos/sortable/empty-lists.html | 16 +++-- demos/sortable/floating.html | 49 ---------------- demos/sortable/index.html | 5 +- demos/sortable/items.html | 28 ++++++--- demos/sortable/placeholder.html | 12 +++- demos/sortable/portlets.html | 55 ++++++++--------- demos/sortable/tolerance.html | 52 ---------------- 17 files changed, 105 insertions(+), 511 deletions(-) delete mode 100644 demos/sortable/connectwith.html delete mode 100644 demos/sortable/delay.html delete mode 100644 demos/sortable/display-portlets.html delete mode 100644 demos/sortable/distance.html delete mode 100644 demos/sortable/droponempty.html delete mode 100644 demos/sortable/droppable.html delete mode 100644 demos/sortable/floating.html delete mode 100644 demos/sortable/tolerance.html diff --git a/demos/sortable/connect-lists.html b/demos/sortable/connect-lists.html index 569dbfa29..6497b5fa1 100644 --- a/demos/sortable/connect-lists.html +++ b/demos/sortable/connect-lists.html @@ -8,8 +8,8 @@ - - - - - - - -

- -

Item 1
Item 2
Item 3
Item 4
Item 5

- -

Item 1
Item 2
Item 3
Item 4
Item 5

- -

- -

- -

- -

- -

- - - diff --git a/demos/sortable/default.html b/demos/sortable/default.html index bd58f4994..dab3907de 100644 --- a/demos/sortable/default.html +++ b/demos/sortable/default.html @@ -9,7 +9,7 @@

-

Time delay of 1000ms:

+

Time delay of 300ms:

-

Item 1
Item 2
Item 3
Item 4

Distance delay of 50px:

Distance delay of 15px:

Item 1

-

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

+

+ Prevent accidental sorting either by delay (time) or distance. Set a number of + milliseconds the element needs to be dragged before sorting starts + with the delay option. Set a distance in pixels the element + needs to be dragged before sorting starts with the distance + option. +

jQuery UI Sortable - Delay / Distance Demo

- -

Delay of 1000ms

- -

Item 1
Item 2
Item 3
Item 4
Item 5

- -

- -

- -

- -

-

To arrange sortable items as a grid, give them identical dimensions and float them using CSS.

+

+ To arrange sortable items as a grid, give them identical dimensions and + float them using CSS. +

jQuery UI Sortable - Display as portlets

- -

- -

-

Feeds

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

-

- -

-

News

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

-

- -

- -

- -

-

Shopping

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

-

- -

- -

- -

-

Links

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

-

- -

-

Images

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

-

- -

- -

- -

Enable portlets (styled divs) as sortables and use the connectWith option to allow sorting between columns.

- -

jQuery UI Sortable - Delay / Distance Demo

- -

Distance of 50px

- -

Item 1
Item 2
Item 3
Item 4
Item 5

- -

- -

- -

- -

jQuery UI Sortable - Dropping on Empty Lists Demo

- -

Can be dropped..
..on an empty list
Item 3
Item 4
Item 5

- -

Cannot be dropped..
..on an empty list
Item 3
Item 4
Item 5

- -

- - -
- -

- -

- -

- -

jQuery UI Sortable - Connect to Droppables Demo

- -

-

Drop a list item on me - sortable items are automatically connected to droppables.

-

- -

Item 1
Item 2
Item 3
Item 4
Item 5

- -

- -

- -

- -

- -

1
2
3
4
5
6
7
8
9
10
11
12

- -

- -

- -

- -

Examples

diff --git a/demos/sortable/items.html b/demos/sortable/items.html index 54b63ed8a..9664ae3db 100644 --- a/demos/sortable/items.html +++ b/demos/sortable/items.html @@ -8,33 +8,36 @@

-

Specify which items are sortable:

+

Specify which items are sortable:

-

Item 1
(I'm not sortable or a drop target)
(I'm not sortable or a drop target)
Item 4

Cancel sorting (but keep as drop targets):

Cancel sorting (but keep as drop targets):

Item 1

-

Specify which items are eligible to sort by passing a jQuery selector into the items option. Items excluded from this option are not sortable, nor are they valid targets for sortable items.

-

To only prevent sorting on certain items, pass a jQuery selector into the cancel option. Cancelled items remain valid sort targets for others.

+

+ Specify which items are eligible to sort by passing a jQuery selector into + the items option. Items excluded from this option are not + sortable, nor are they valid targets for sortable items. +

+ +

+ To only prevent sorting on certain items, pass a jQuery selector into the + cancel option. Cancelled items remain valid sort targets for + others. +

- -

Default tolerance
2
3

- -
-
- -

Pointer tolerance
2
3

- -

- -

Set the stickiness of drop areas using the tolerance option. Specify whether the drop should occur when either the pointer or intersection (mid-point of the sortable item) crosses the drop area's boundary. By default, the script guesses which option is best to use for each drag.

- -