r1328 - in trunk/demos: draggable droppable sortable

r1328 - in trunk/demos: draggable droppable sortable


Author: rdworth
Date: Tue Dec 30 07:51:51 2008
New Revision: 1328
Modified:
trunk/demos/draggable/axis.html (contents, props changed)
trunk/demos/draggable/containment.html (contents, props changed)
trunk/demos/draggable/cursorat.html (contents, props changed)
trunk/demos/draggable/default.html (contents, props changed)
trunk/demos/draggable/delaydistance.html (contents, props changed)
trunk/demos/draggable/grid.html (contents, props changed)
trunk/demos/draggable/handle.html (contents, props changed)
trunk/demos/draggable/helper.html (contents, props changed)
trunk/demos/draggable/opacity.html (contents, props changed)
trunk/demos/draggable/revert.html (contents, props changed)
trunk/demos/draggable/scroll.html (contents, props changed)
trunk/demos/draggable/snap.html (contents, props changed)
trunk/demos/draggable/zindexstack.html (contents, props changed)
trunk/demos/droppable/accept.html (contents, props changed)
trunk/demos/droppable/activeclass.html (contents, props changed)
trunk/demos/droppable/default.html (contents, props changed)
trunk/demos/droppable/greedy.html (contents, props changed)
trunk/demos/droppable/hoverclass.html (contents, props changed)
trunk/demos/droppable/tolerance.html (contents, props changed)
trunk/demos/sortable/connectwith.html (contents, props changed)
trunk/demos/sortable/default.html (contents, props changed)
trunk/demos/sortable/delaydistance.html (contents, props changed)
trunk/demos/sortable/droponempty.html (contents, props changed)
trunk/demos/sortable/floating.html (contents, props changed)
trunk/demos/sortable/items.html (contents, props changed)
trunk/demos/sortable/placeholder.html (contents, props changed)
Log:
set svn:eol-style to native
Modified: trunk/demos/draggable/axis.html
==============================================================================
--- trunk/demos/draggable/axis.html    (original)
+++ trunk/demos/draggable/axis.html    Tue Dec 30 07:51:51 2008
@@ -1,33 +1,33 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>jQuery UI Draggable - Constrained to one axis</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.draggable.js"></script>
-    <style type="text/css">
-    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
-    #draggable { cursor: n-resize; }
-    #draggable2 { cursor: e-resize; }
-    </style>
-    <script type="text/javascript">
-    $(function() {
-        $("#draggable").draggable({ axis: 'y' });
-        $("#draggable2").draggable({ axis: 'x' });
-    });
-    </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
-    

I can be dragged only vertically


-</div>
-
-<div id="draggable2" class="ui-widget-content">
-    

I can be dragged only horizontally


-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Constrained to one axis</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.draggable.js"></script>
+    <style type="text/css">
+    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
+    #draggable { cursor: n-resize; }
+    #draggable2 { cursor: e-resize; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable({ axis: 'y' });
+        $("#draggable2").draggable({ axis: 'x' });
+    });
+    </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+    

I can be dragged only vertically


+</div>
+
+<div id="draggable2" class="ui-widget-content">
+    

I can be dragged only horizontally


+</div>
+
+</body>
+</html>
Modified: trunk/demos/draggable/containment.html
==============================================================================
--- trunk/demos/draggable/containment.html    (original)
+++ trunk/demos/draggable/containment.html    Tue Dec 30 07:51:51 2008
@@ -1,38 +1,38 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>jQuery UI Draggable - Containment</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.draggable.js"></script>
-    <style type="text/css">
-    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
-    </style>
-    <script type="text/javascript">
-    $(function() {
-        $("#draggable").draggable({ containment: 'window' });
-        $("#draggable2").draggable({ containment: 'document' });
-        $("#draggable3").draggable({ containment: 'parent' });
-    });
-    </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
-    

I'm contained within the window


-</div>
-
-<div id="draggable2" class="ui-widget-content">
-    

I'm contained within the document


-</div>
-
-<div class="ui-widget-content">
-    <p id="draggable3" class='ui-widget-header'>I'm contained within my
parent
-</div>
-
-<div style='width: 1px; height: 500px;'></div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Containment</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.draggable.js"></script>
+    <style type="text/css">
+    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable({ containment: 'window' });
+        $("#draggable2").draggable({ containment: 'document' });
+        $("#draggable3").draggable({ containment: 'parent' });
+    });
+    </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+    

I'm contained within the window


+</div>
+
+<div id="draggable2" class="ui-widget-content">
+    

I'm contained within the document


+</div>
+
+<div class="ui-widget-content">
+    <p id="draggable3" class='ui-widget-header'>I'm contained within my
parent
+</div>
+
+<div style='width: 1px; height: 500px;'></div>
+
+</body>
+</html>
Modified: trunk/demos/draggable/cursorat.html
==============================================================================
--- trunk/demos/draggable/cursorat.html    (original)
+++ trunk/demos/draggable/cursorat.html    Tue Dec 30 07:51:51 2008
@@ -1,36 +1,36 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>jQuery UI Draggable - Cursor at a certain position</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.draggable.js"></script>
-    <style type="text/css">
-    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
-    </style>
-    <script type="text/javascript">
-    $(function() {
-        $("#draggable").draggable({ cursorAt: { top: 56, left: 56 } });
-        $("#draggable2").draggable({ cursorAt: { top: -5, left: -5 } });
-        $("#draggable3").draggable({ cursorAt: { bottom: 0 } });
-    });
-    </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
-    

I will always stick to the center (relative to the mouse)


-</div>
-
-<div id="draggable2" class="ui-widget-content">
-    

My cursor is at left -5 and top -5


-</div>
-
-<div id="draggable3" class="ui-widget-content">
-    

My cursor position is only controlled for the 'bottom' value


-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Cursor at a certain position</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.draggable.js"></script>
+    <style type="text/css">
+    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable({ cursorAt: { top: 56, left: 56 } });
+        $("#draggable2").draggable({ cursorAt: { top: -5, left: -5 } });
+        $("#draggable3").draggable({ cursorAt: { bottom: 0 } });
+    });
+    </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+    

I will always stick to the center (relative to the mouse)


+</div>
+
+<div id="draggable2" class="ui-widget-content">
+    

My cursor is at left -5 and top -5


+</div>
+
+<div id="draggable3" class="ui-widget-content">
+    

My cursor position is only controlled for the 'bottom' value


+</div>
+
+</body>
+</html>
Modified: trunk/demos/draggable/default.html
==============================================================================
--- trunk/demos/draggable/default.html    (original)
+++ trunk/demos/draggable/default.html    Tue Dec 30 07:51:51 2008
@@ -1,26 +1,26 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>jQuery UI Draggable - Default Demo</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.draggable.js"></script>
-    <style type="text/css">
-    #draggable { width: 150px; height: 150px; padding: 0.5em; }
-    </style>
-    <script type="text/javascript">
-    $(function() {
-        $("#draggable").draggable();
-    });
-    </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
-    

Drag me around


-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Default Demo</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.draggable.js"></script>
+    <style type="text/css">
+    #draggable { width: 150px; height: 150px; padding: 0.5em; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable();
+    });
+    </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+    

Drag me around


+</div>
+
+</body>
+</html>
Modified: trunk/demos/draggable/delaydistance.html
==============================================================================
--- trunk/demos/draggable/delaydistance.html    (original)
+++ trunk/demos/draggable/delaydistance.html    Tue Dec 30 07:51:51 2008
@@ -1,31 +1,31 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>jQuery UI Draggable - Distance and Delay</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.draggable.js"></script>
-    <style type="text/css">
-    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
-    </style>
-    <script type="text/javascript">
-    $(function() {
-        $("#draggable").draggable({ distance: 20 });
-        $("#draggable2").draggable({ delay: 1000 });
-    });
-    </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
-    

Only if you drag me by 20 pixels, the dragging will start


-</div>
-
-<div id="draggable2" class="ui-widget-content">
-    

Regardless of the distance, you have to drag and wait for 1000ms
before dragging starts


-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Distance and Delay</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.draggable.js"></script>
+    <style type="text/css">
+    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable({ distance: 20 });
+        $("#draggable2").draggable({ delay: 1000 });
+    });
+    </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+    

Only if you drag me by 20 pixels, the dragging will start


+</div>
+
+<div id="draggable2" class="ui-widget-content">
+    

Regardless of the distance, you have to drag and wait for 1000ms
before dragging starts


+</div>
+
+</body>
+</html>
Modified: trunk/demos/draggable/grid.html
==============================================================================
--- trunk/demos/draggable/grid.html    (original)
+++ trunk/demos/draggable/grid.html    Tue Dec 30 07:51:51 2008
@@ -1,31 +1,31 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>jQuery UI Draggable - Grid</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.draggable.js"></script>
-    <style type="text/css">
-    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
-    </style>
-    <script type="text/javascript">
-    $(function() {
-        $("#draggable").draggable({ grid: [20,20] });
-        $("#draggable2").draggable({ grid: [1,50] });
-    });
-    </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
-    

I can be dragged in a 20x20 grid system


-</div>
-
-<div id="draggable2" class="ui-widget-content">
-    

I only follow a vertical 50 pixel grid


-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Grid</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.draggable.js"></script>
+    <style type="text/css">
+    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable({ grid: [20,20] });
+        $("#draggable2").draggable({ grid: [1,50] });
+    });
+    </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+    

I can be dragged in a 20x20 grid system


+</div>
+
+<div id="draggable2" class="ui-widget-content">
+    

I only follow a vertical 50 pixel grid


+</div>
+
+</body>
+</html>
Modified: trunk/demos/draggable/handle.html
==============================================================================
--- trunk/demos/draggable/handle.html    (original)
+++ trunk/demos/draggable/handle.html    Tue Dec 30 07:51:51 2008
@@ -1,27 +1,27 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>jQuery UI Draggable - Handle</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.draggable.js"></script>
-    <style type="text/css">
-    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
-    .ui-widget-header { cursor: move; }
-    </style>
-    <script type="text/javascript">
-    $(function() {
-        $("#draggable").draggable({ handle: 'p' });
-    });
-    </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
-    <p class="ui-widget-header">I can be dragged only by this handle
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Handle</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.draggable.js"></script>
+    <style type="text/css">
+    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
+    .ui-widget-header { cursor: move; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable({ handle: 'p' });
+    });
+    </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+    <p class="ui-widget-header">I can be dragged only by this handle
+</div>
+
+</body>
+</html>
Modified: trunk/demos/draggable/helper.html
==============================================================================
--- trunk/demos/draggable/helper.html    (original)
+++ trunk/demos/draggable/helper.html    Tue Dec 30 07:51:51 2008
@@ -1,41 +1,41 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>jQuery UI Draggable - Helper</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.draggable.js"></script>
-    <style type="text/css">
-    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
-    </style>
-    <script type="text/javascript">
-    $(function() {
-        $("#draggable").draggable({ helper: 'original' });
-        $("#draggable2").draggable({ helper: 'clone' });
-        $("#draggable3").draggable({
-            cursorAt: { top: -5, left: -5 },
-            helper: function(event) {
-                return $('<div class="ui-widget-header">I\'m a custom helper</div>');
-            }
-        });
-    });
-    </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
-    

Original


-</div>
-
-<div id="draggable2" class="ui-widget-content">
-    

Clone


-</div>
-
-<div id="draggable3" class="ui-widget-content">
-    

Custom helper (in combination with cursorAt)


-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Helper</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.draggable.js"></script>
+    <style type="text/css">
+    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
+    </style>
+    <script type="text/javascript">
+    $(function() {
+        $("#draggable").draggable({ helper: 'original' });
+        $("#draggable2").draggable({ helper: 'clone' });
+        $("#draggable3").draggable({
+            cursorAt: { top: -5, left: -5 },
+            helper: function(event) {
+                return $('<div class="ui-widget-header">I\'m a custom helper</div>');
+            }
+        });
+    });
+    </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+    

Original


+</div>
+
+<div id="draggable2" class="ui-widget-content">
+    

Clone


+</div>
+
+<div id="draggable3" class="ui-widget-content">
+    

Custom helper (in combination with cursorAt)


+</div>
+
+</body>
+</html>
Modified: trunk/demos/draggable/opacity.html
==============================================================================
--- trunk/demos/draggable/opacity.html    (original)
+++ trunk/demos/draggable/opacity.html    Tue Dec 30 07:51:51 2008
@@ -1,31 +1,31 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <title>jQuery UI Draggable - Opacity</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.draggable.js"></script>
-    <style type="text/css">
-    .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 5px; }
-    </style>
-    <script type="text/javascript">
-    $(function() {
-        $("#draggable").draggable({ opacity: 0.5 });
-        $("#draggable2").draggable({ opacity: 0.5, helper: 'clone' });
-    });
-    </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
-    

Opacity set to 0.5


-</div>
-
-<div id="draggable2" class="ui-widget-content">
-    

Opacity set to 0.5, using 'clone' as helper


-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Draggable - Opacity</title>
+    <link type=&quo