r1322 - trunk/demos/sortable

Author: paul.bakaus
Date: Tue Dec 30 06:38:15 2008
New Revision: 1322
Added:
trunk/demos/sortable/connectwith.html
trunk/demos/sortable/droponempty.html
trunk/demos/sortable/items.html
Modified:
trunk/demos/sortable/index.html
Log:
demo: sortables: connectWith, dropOnEmpty, excluding items
Added: trunk/demos/sortable/connectwith.html
==============================================================================
--- (empty file)
+++ trunk/demos/sortable/connectwith.html    Tue Dec 30 06:38:15 2008
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Sortable - Connected lists</title>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+    <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+    <script type="text/javascript" src="../../ui/ui.core.js"></script>
+    <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+    <style type="text/css">
+    ul { list-style-type: none; margin: 0; padding: 0; float: left;
margin-right: 10px; }
+    li { margin: 3px; padding: 2px; width: 120px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("ul").sortable({
+            connectWith: ['ul']
+        });
+    });
+    </script>
+</head>
+<body>
+
+<ul>
+    <li class="ui-state-default">Item 1</li>
+    <li class="ui-state-default">Item 2</li>
+    <li class="ui-state-default">Item 3</li>
+    <li class="ui-state-default">Item 4</li>
+    <li class="ui-state-default">Item 5</li>
+</ul>
+
+<ul>
+    <li class="ui-state-highlight">Item 1</li>
+    <li class="ui-state-highlight">Item 2</li>
+    <li class="ui-state-highlight">Item 3</li>
+    <li class="ui-state-highlight">Item 4</li>
+    <li class="ui-state-highlight">Item 5</li>
+</ul>
+
+</body>
+</html>
Added: trunk/demos/sortable/droponempty.html
==============================================================================
--- (empty file)
+++ trunk/demos/sortable/droponempty.html    Tue Dec 30 06:38:15 2008
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Sortable - Dropping on empty lists</title>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+    <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+    <script type="text/javascript" src="../../ui/ui.core.js"></script>
+    <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+    <style type="text/css">
+    ul { list-style-type: none; margin: 0; padding: 0; float: left;
margin-right: 10px; background: #eee; padding: 5px; width: 133px;}
+    li { margin: 3px; padding: 2px; width: 120px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("ul.droptrue").sortable({
+            connectWith: ['ul']
+        });
+
+        $("ul.dropfalse").sortable({
+            connectWith: ['ul'],
+            dropOnEmpty: false
+        });
+    });
+    </script>
+</head>
+<body>
+
+<ul class='droptrue'>
+    <li class="ui-state-default">Can be dropped..</li>
+    <li class="ui-state-default">..on an empty list</li>
+    <li class="ui-state-default">Item 3</li>
+    <li class="ui-state-default">Item 4</li>
+    <li class="ui-state-default">Item 5</li>
+</ul>
+
+<ul class='dropfalse'>
+    <li class="ui-state-highlight">Cannot be dropped..</li>
+    <li class="ui-state-highlight">..on an empty list</li>
+    <li class="ui-state-highlight">Item 3</li>
+    <li class="ui-state-highlight">Item 4</li>
+    <li class="ui-state-highlight">Item 5</li>
+</ul>
+
+<ul class='droptrue'>
+</ul>
+
+<br clear="both" />
+
+</body>
+</html>
Modified: trunk/demos/sortable/index.html
==============================================================================
--- trunk/demos/sortable/index.html    (original)
+++ trunk/demos/sortable/index.html    Tue Dec 30 06:38:15 2008
@@ -13,7 +13,9 @@
        <li><a href="floating.html">Floating</a></li>
        <li><a href="placeholder.html">Placeholder</a></li>
        <li><a href="delaydistance.html">Delay / Distance</a></li>
-
+        <li><a href="items.html">Excluding items</a></li>
+        <li><a href="connectwith.html">Connecting two lists</a></li>
+        <li><a href="droponempty.html">Dropping on empty lists</a></li>
    </ul>
</div>
Added: trunk/demos/sortable/items.html
==============================================================================
--- (empty file)
+++ trunk/demos/sortable/items.html    Tue Dec 30 06:38:15 2008
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Sortable - Items</title>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+    <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+    <script type="text/javascript" src="../../ui/ui.core.js"></script>
+    <script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+    <style type="text/css">
+    ul { list-style-type: none; margin: 0; padding: 0; }
+    li { margin: 3px; padding: 2px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("ul:eq(0)").sortable({
+            items: 'li:not(.ui-state-disabled)'
+        });
+
+        $("ul:eq(1)").sortable({
+            cancel: '.ui-state-disabled'
+        });
+    });
+    </script>
+</head>
+<body>
+
+

Completely exclude items from the sorting logic using the 'items'
option

+
+<ul>
+    <li class="ui-state-default">Item 1</li>
+    <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
+    <li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
+    <li class="ui-state-default">Item 4</li>
+    <li class="ui-state-default">Item 5</li>
+</ul>
+
+

Keep the items as valid targets, but non-draggable, using the 'cancel'
option