]> source.dussan.org Git - jquery-ui.git/commitdiff
demos: added connectToSortable demo for draggables
authorPaul Bakaus <paul.bakaus@googlemail.com>
Tue, 30 Dec 2008 16:36:18 +0000 (16:36 +0000)
committerPaul Bakaus <paul.bakaus@googlemail.com>
Tue, 30 Dec 2008 16:36:18 +0000 (16:36 +0000)
demos/draggable/index.html
demos/draggable/sortable.html [new file with mode: 0644]

index 04d4efde2c42da81812d1d6ccefc0ef456b3a5d0..3da1373d5b21a3b9a8e2a8e0a7c67eb45e8d17fd 100644 (file)
@@ -22,6 +22,7 @@
                <li><a href="scroll.html">Scroll</a></li>
                <li><a href="snap.html">Snap</a></li>
                <li><a href="zindexstack.html">Z-Index / Stack</a></li>
+               <li><a href="sortable.html">Connected to Sortable</a></li>
        </ul>
 </div>
 
diff --git a/demos/draggable/sortable.html b/demos/draggable/sortable.html
new file mode 100644 (file)
index 0000000..f5be077
--- /dev/null
@@ -0,0 +1,41 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Sortable - Default Demo</title>\r
+       <link type="text/css" href="../demos.css" rel="stylesheet" />\r
+       <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
+       <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.sortable.js"></script>\r
+       <style type="text/css">\r
+       ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }\r
+       li { margin: 3px; padding: 2px; width: 150px; }\r
+       .ui-widget-header { margin-bottom: 10px; float: right; width: 100px; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               $("ul.sortable").sortable();\r
+               $(".draggable").draggable({\r
+                       connectToSortable: ['ul'],\r
+                       helper: 'clone'\r
+               });\r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<ul>\r
+       <li class="ui-state-hover draggable">Drag me down</li>\r
+</ul>\r
+\r
+<ul class="sortable">\r
+       <li class="ui-state-default">Item 1</li>\r
+       <li class="ui-state-default">Item 2</li>\r
+       <li class="ui-state-default">Item 3</li>\r
+       <li class="ui-state-default">Item 4</li>\r
+       <li class="ui-state-default">Item 5</li>\r
+</ul>\r
+\r
+</body>\r
+</html>\r