From c3591d49d67b97ca81faabeb5f24558f02d2ed55 Mon Sep 17 00:00:00 2001 From: Maggie Costello Wachs Date: Fri, 16 Jan 2009 22:51:08 +0000 Subject: [PATCH] reorganized/renamed sortable demos --- demos/sortable/connect-lists.html | 50 ++++++++++++++++ demos/sortable/delay-start.html | 56 ++++++++++++++++++ demos/sortable/display-grid.html | 47 +++++++++++++++ demos/sortable/display-portlets.html | 88 ++++++++++++++++++++++++++++ demos/sortable/empty-lists.html | 60 +++++++++++++++++++ 5 files changed, 301 insertions(+) create mode 100644 demos/sortable/connect-lists.html create mode 100644 demos/sortable/delay-start.html create mode 100644 demos/sortable/display-grid.html create mode 100644 demos/sortable/display-portlets.html create mode 100644 demos/sortable/empty-lists.html diff --git a/demos/sortable/connect-lists.html b/demos/sortable/connect-lists.html new file mode 100644 index 000000000..569dbfa29 --- /dev/null +++ b/demos/sortable/connect-lists.html @@ -0,0 +1,50 @@ + + + + jQuery UI Sortable - Connect lists + + + + + + + + + +
+ + + + + +
+ +
+ +

Sort items from one list into another and vice versa passing an array into the connectWith option. The simplest way to do this is to group all related lists with a CSS class, and then pass that class into the sortable function using array notation (i.e., connectWith: ['.myclass']).

+ +
+ + + diff --git a/demos/sortable/delay-start.html b/demos/sortable/delay-start.html new file mode 100644 index 000000000..9952c830e --- /dev/null +++ b/demos/sortable/delay-start.html @@ -0,0 +1,56 @@ + + + + jQuery UI Sortable - Delay start + + + + + + + + + +
+ +

Time delay of 1000ms:

+ + + +

Distance delay of 50px:

+ + + +
+ +
+ +

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.

+ +
+ + + diff --git a/demos/sortable/display-grid.html b/demos/sortable/display-grid.html new file mode 100644 index 000000000..c0081a3cb --- /dev/null +++ b/demos/sortable/display-grid.html @@ -0,0 +1,47 @@ + + + + jQuery UI Sortable - Display as grid + + + + + + + + + +
+ + + +
+ +
+ +

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

+ +
+ + + diff --git a/demos/sortable/display-portlets.html b/demos/sortable/display-portlets.html new file mode 100644 index 000000000..c71dcd2d3 --- /dev/null +++ b/demos/sortable/display-portlets.html @@ -0,0 +1,88 @@ + + + + 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.

+ +
+ + + diff --git a/demos/sortable/empty-lists.html b/demos/sortable/empty-lists.html new file mode 100644 index 000000000..7c66515eb --- /dev/null +++ b/demos/sortable/empty-lists.html @@ -0,0 +1,60 @@ + + + + jQuery UI Sortable - Handle empty lists + + + + + + + + + +
+ + + + + + + +
+ +
+ +
+ +

Prevent all items in a list from being dropped into a separate, empty list using the dropOnEmpty option set to false. By default, sortable items can be dropped on empty lists.

+ +
+ + +