aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--demos/draggable/axis.html66
-rw-r--r--demos/draggable/containment.html76
-rw-r--r--demos/draggable/cursorat.html72
-rw-r--r--demos/draggable/default.html52
-rw-r--r--demos/draggable/delaydistance.html62
-rw-r--r--demos/draggable/grid.html62
-rw-r--r--demos/draggable/handle.html54
-rw-r--r--demos/draggable/helper.html82
-rw-r--r--demos/draggable/opacity.html62
-rw-r--r--demos/draggable/revert.html62
-rw-r--r--demos/draggable/scroll.html76
-rw-r--r--demos/draggable/snap.html114
-rw-r--r--demos/draggable/zindexstack.html84
-rw-r--r--demos/droppable/accept.html98
-rw-r--r--demos/droppable/activeclass.html80
-rw-r--r--demos/droppable/default.html76
-rw-r--r--demos/droppable/greedy.html128
-rw-r--r--demos/droppable/hoverclass.html78
-rw-r--r--demos/droppable/tolerance.html166
-rw-r--r--demos/sortable/connectwith.html82
-rw-r--r--demos/sortable/default.html72
-rw-r--r--demos/sortable/delaydistance.html102
-rw-r--r--demos/sortable/droponempty.html102
-rw-r--r--demos/sortable/floating.html76
-rw-r--r--demos/sortable/items.html98
-rw-r--r--demos/sortable/placeholder.html76
26 files changed, 1079 insertions, 1079 deletions
diff --git a/demos/draggable/axis.html b/demos/draggable/axis.html
index 26154961b..c2c234071 100644
--- a/demos/draggable/axis.html
+++ b/demos/draggable/axis.html
@@ -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">
- <p>I can be dragged only vertically</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>I can be dragged only horizontally</p>
-</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">
+ <p>I can be dragged only vertically</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>I can be dragged only horizontally</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/containment.html b/demos/draggable/containment.html
index 0341e2689..b30d61436 100644
--- a/demos/draggable/containment.html
+++ b/demos/draggable/containment.html
@@ -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">
- <p>I'm contained within the window</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>I'm contained within the document</p>
-</div>
-
-<div class="ui-widget-content">
- <p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>
-</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">
+ <p>I'm contained within the window</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>I'm contained within the document</p>
+</div>
+
+<div class="ui-widget-content">
+ <p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>
+</div>
+
+<div style='width: 1px; height: 500px;'></div>
+
+</body>
+</html>
diff --git a/demos/draggable/cursorat.html b/demos/draggable/cursorat.html
index 9fbf7f2ca..ec98a935a 100644
--- a/demos/draggable/cursorat.html
+++ b/demos/draggable/cursorat.html
@@ -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">
- <p>I will always stick to the center (relative to the mouse)</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>My cursor is at left -5 and top -5</p>
-</div>
-
-<div id="draggable3" class="ui-widget-content">
- <p>My cursor position is only controlled for the 'bottom' value</p>
-</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">
+ <p>I will always stick to the center (relative to the mouse)</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>My cursor is at left -5 and top -5</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+ <p>My cursor position is only controlled for the 'bottom' value</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/default.html b/demos/draggable/default.html
index a8c124d20..e0cc9a6ea 100644
--- a/demos/draggable/default.html
+++ b/demos/draggable/default.html
@@ -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">
- <p>Drag me around</p>
-</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">
+ <p>Drag me around</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/delaydistance.html b/demos/draggable/delaydistance.html
index 985c081d3..84abedb4c 100644
--- a/demos/draggable/delaydistance.html
+++ b/demos/draggable/delaydistance.html
@@ -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">
- <p>Only if you drag me by 20 pixels, the dragging will start</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
-</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">
+ <p>Only if you drag me by 20 pixels, the dragging will start</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/grid.html b/demos/draggable/grid.html
index ec5c9d3d8..48a3d1752 100644
--- a/demos/draggable/grid.html
+++ b/demos/draggable/grid.html
@@ -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">
- <p>I can be dragged in a 20x20 grid system</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>I only follow a vertical 50 pixel grid</p>
-</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">
+ <p>I can be dragged in a 20x20 grid system</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>I only follow a vertical 50 pixel grid</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html
index ae2c777d2..b3b9f2d2c 100644
--- a/demos/draggable/handle.html
+++ b/demos/draggable/handle.html
@@ -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</p>
-</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</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/helper.html b/demos/draggable/helper.html
index 4ff3e47ab..9246895de 100644
--- a/demos/draggable/helper.html
+++ b/demos/draggable/helper.html
@@ -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">
- <p>Original</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>Clone</p>
-</div>
-
-<div id="draggable3" class="ui-widget-content">
- <p>Custom helper (in combination with cursorAt)</p>
-</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">
+ <p>Original</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>Clone</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+ <p>Custom helper (in combination with cursorAt)</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/opacity.html b/demos/draggable/opacity.html
index 0848f494d..0ee3e18af 100644
--- a/demos/draggable/opacity.html
+++ b/demos/draggable/opacity.html
@@ -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">
- <p>Opacity set to 0.5</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>Opacity set to 0.5, using 'clone' as helper</p>
-</div>
-
-</body>
-</html>
+<!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">
+ <p>Opacity set to 0.5</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>Opacity set to 0.5, using 'clone' as helper</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html
index 065d85231..c50f944bb 100644
--- a/demos/draggable/revert.html
+++ b/demos/draggable/revert.html
@@ -1,31 +1,31 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Revert</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({ revert: true });
- $("#draggable2").draggable({ revert: true, helper: 'clone' });
- });
- </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
- <p>Revert the original</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>Revert the helper</p>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Revert</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({ revert: true });
+ $("#draggable2").draggable({ revert: true, helper: 'clone' });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Revert the original</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>Revert the helper</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/draggable/scroll.html b/demos/draggable/scroll.html
index e27fa10e6..c1d159710 100644
--- a/demos/draggable/scroll.html
+++ b/demos/draggable/scroll.html
@@ -1,38 +1,38 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Scroll</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({ scroll: true });
- $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });
- $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });
- });
- </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
- <p>Scroll set to true, default settings</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>scrollSensitivity set to 100</p>
-</div>
-
-<div id="draggable3" class="ui-widget-content">
- <p>scrollSpeed set to 100</p>
-</div>
-
-<div style='height: 5000px; width: 1px;'></div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Scroll</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({ scroll: true });
+ $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });
+ $("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Scroll set to true, default settings</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>scrollSensitivity set to 100</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+ <p>scrollSpeed set to 100</p>
+</div>
+
+<div style='height: 5000px; width: 1px;'></div>
+
+</body>
+</html>
diff --git a/demos/draggable/snap.html b/demos/draggable/snap.html
index 806d74250..f232ff397 100644
--- a/demos/draggable/snap.html
+++ b/demos/draggable/snap.html
@@ -1,57 +1,57 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Snap</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: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
- .ui-widget-header { height: 130px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#draggable").draggable({ snap: true });
- $("#draggable2").draggable({ snap: '.ui-widget-header' });
- $("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' });
- $("#draggable4").draggable({ snap: '.ui-widget-header', snapMode: 'inner' });
- $("#draggable5").draggable({ snap: '.ui-widget-header', snapTolerance: 50 });
- });
- </script>
-</head>
-<body>
-
-<div class="ui-widget-header">
- <p>I'm a snap target</p>
-</div>
-
-<br clear="both" />
-
-<div id="draggable" class="ui-widget-content">
- <p>Default (snap: true), snaps to all other draggable elements</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
- <p>I only snap to the big box</p>
-</div>
-
-<div id="draggable3" class="ui-widget-content">
- <p>I only snap to the outer edges of the bix box</p>
-</div>
-
-<div id="draggable4" class="ui-widget-content">
- <p>I only snap to the inner edges of the big box</p>
-</div>
-
-<div id="draggable5" class="ui-widget-content">
- <p>I also snap to the big box but I'm very sticky because I have a high tolerance</p>
-</div>
-
-
-
-
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Snap</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: 75px; height: 80px; padding: 0.5em; float: left; margin: 5px; }
+ .ui-widget-header { height: 130px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ snap: true });
+ $("#draggable2").draggable({ snap: '.ui-widget-header' });
+ $("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' });
+ $("#draggable4").draggable({ snap: '.ui-widget-header', snapMode: 'inner' });
+ $("#draggable5").draggable({ snap: '.ui-widget-header', snapTolerance: 50 });
+ });
+ </script>
+</head>
+<body>
+
+<div class="ui-widget-header">
+ <p>I'm a snap target</p>
+</div>
+
+<br clear="both" />
+
+<div id="draggable" class="ui-widget-content">
+ <p>Default (snap: true), snaps to all other draggable elements</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+ <p>I only snap to the big box</p>
+</div>
+
+<div id="draggable3" class="ui-widget-content">
+ <p>I only snap to the outer edges of the bix box</p>
+</div>
+
+<div id="draggable4" class="ui-widget-content">
+ <p>I only snap to the inner edges of the big box</p>
+</div>
+
+<div id="draggable5" class="ui-widget-content">
+ <p>I also snap to the big box but I'm very sticky because I have a high tolerance</p>
+</div>
+
+
+
+
+
+</body>
+</html>
diff --git a/demos/draggable/zindexstack.html b/demos/draggable/zindexstack.html
index 8f9dbb8a6..d21c0bff4 100644
--- a/demos/draggable/zindexstack.html
+++ b/demos/draggable/zindexstack.html
@@ -1,42 +1,42 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Z-Index / Stack</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; }
- #set { width: 368px; height: 120px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#draggable").draggable({ zIndex: 1000 });
- $("#set div").draggable({ stack: { group: '#set div', min: 1 } });
- });
- </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
- <p>I always have a higher z-index than my siblings during drag</p>
-</div>
-
-<div id="set" class="ui-widget-content">
- <div class="ui-widget-content">
- <p>We are draggables..</p>
- </div>
-
- <div class="ui-widget-content">
- <p>..whose z-indexes are controlled automatically..</p>
- </div>
-
- <div class="ui-widget-content">
- <p>..with the stack option.</p>
- </div>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Draggable - Z-Index / Stack</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; }
+ #set { width: 368px; height: 120px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable({ zIndex: 1000 });
+ $("#set div").draggable({ stack: { group: '#set div', min: 1 } });
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>I always have a higher z-index than my siblings during drag</p>
+</div>
+
+<div id="set" class="ui-widget-content">
+ <div class="ui-widget-content">
+ <p>We are draggables..</p>
+ </div>
+
+ <div class="ui-widget-content">
+ <p>..whose z-indexes are controlled automatically..</p>
+ </div>
+
+ <div class="ui-widget-content">
+ <p>..with the stack option.</p>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/demos/droppable/accept.html b/demos/droppable/accept.html
index a4ccfee87..f2b02ba93 100644
--- a/demos/droppable/accept.html
+++ b/demos/droppable/accept.html
@@ -1,49 +1,49 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Droppable - accept</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>
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
- <style type="text/css">
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
- </style>
- <script type="text/javascript">
- $(function() {
-
- $("#draggable,#draggable-nonvalid").draggable();
-
- $("#droppable").droppable({
- accept: '#draggable',
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- });
- </script>
-</head>
-<body>
-
-<div id="draggable-nonvalid" class="ui-widget-content">
- <p>I'm draggable but can't be dropped</p>
-</div>
-
-<div id="draggable" class="ui-widget-content">
- <p>Drag me to my target</p>
-</div>
-
-
-
-<div id="droppable" class="ui-widget-header">
- <p>accept: '#draggable'</p>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - accept</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>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $("#draggable,#draggable-nonvalid").draggable();
+
+ $("#droppable").droppable({
+ accept: '#draggable',
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable-nonvalid" class="ui-widget-content">
+ <p>I'm draggable but can't be dropped</p>
+</div>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+
+
+<div id="droppable" class="ui-widget-header">
+ <p>accept: '#draggable'</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/droppable/activeclass.html b/demos/droppable/activeclass.html
index 97cdee0da..90a8b6cc9 100644
--- a/demos/droppable/activeclass.html
+++ b/demos/droppable/activeclass.html
@@ -1,40 +1,40 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Droppable - activeClass</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>
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
- <style type="text/css">
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#draggable").draggable();
- $("#droppable").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- });
- </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
- <p>Drag me to my target</p>
-</div>
-
-<div id="droppable" class="ui-widget-header">
- <p>Drop here</p>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - activeClass</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>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable();
+ $("#droppable").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+ <p>Drop here</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/droppable/default.html b/demos/droppable/default.html
index 122f57e14..50f0a0877 100644
--- a/demos/droppable/default.html
+++ b/demos/droppable/default.html
@@ -1,38 +1,38 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Droppable - 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>
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
- <style type="text/css">
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#draggable").draggable();
- $("#droppable").droppable({
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- });
- </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
- <p>Drag me to my target</p>
-</div>
-
-<div id="droppable" class="ui-widget-header">
- <p>Drop here</p>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - 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>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable();
+ $("#droppable").droppable({
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+ <p>Drop here</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/droppable/greedy.html b/demos/droppable/greedy.html
index 1ccf6277a..ab5e63b3b 100644
--- a/demos/droppable/greedy.html
+++ b/demos/droppable/greedy.html
@@ -1,64 +1,64 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Droppable - greedy</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>
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
- <style type="text/css">
- #droppable,#droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
- #droppable-inner,#droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
- </style>
- <script type="text/javascript">
- $(function() {
-
- $("#draggable").draggable();
-
- $("#droppable, #droppable-inner").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- $("#droppable2, #droppable2-inner").droppable({
- greedy: true,
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- });
- </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
- <p>Drag me to my target</p>
-</div>
-
-
-
-<div id="droppable" class="ui-widget-header">
- <p>Outer droppable (greedy deactivated)</p>
- <div id="droppable-inner" class="ui-widget-header">
- <p>Inner droppable (greedy deactivated)</p>
- </div>
-</div>
-
-<div id="droppable2" class="ui-widget-header">
- <p>Outer droppable (greedy deactivated)</p>
- <div id="droppable2-inner" class="ui-widget-header">
- <p>Inner droppable (greedy deactivated)</p>
- </div>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - greedy</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>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ #droppable,#droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }
+ #droppable-inner,#droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $("#draggable").draggable();
+
+ $("#droppable, #droppable-inner").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ $("#droppable2, #droppable2-inner").droppable({
+ greedy: true,
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+
+
+<div id="droppable" class="ui-widget-header">
+ <p>Outer droppable (greedy deactivated)</p>
+ <div id="droppable-inner" class="ui-widget-header">
+ <p>Inner droppable (greedy deactivated)</p>
+ </div>
+</div>
+
+<div id="droppable2" class="ui-widget-header">
+ <p>Outer droppable (greedy deactivated)</p>
+ <div id="droppable2-inner" class="ui-widget-header">
+ <p>Inner droppable (greedy deactivated)</p>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/demos/droppable/hoverclass.html b/demos/droppable/hoverclass.html
index d71abd42e..3e8e30ed2 100644
--- a/demos/droppable/hoverclass.html
+++ b/demos/droppable/hoverclass.html
@@ -1,39 +1,39 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Droppable - hoverClass</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>
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
- <style type="text/css">
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#draggable").draggable();
- $("#droppable").droppable({
- hoverClass: 'ui-state-active',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- });
- </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
- <p>Drag me to my target</p>
-</div>
-
-<div id="droppable" class="ui-widget-header">
- <p>Drop here</p>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - hoverClass</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>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#draggable").draggable();
+ $("#droppable").droppable({
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+ <p>Drop here</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/droppable/tolerance.html b/demos/droppable/tolerance.html
index 9f08934d8..d49cfcfdd 100644
--- a/demos/droppable/tolerance.html
+++ b/demos/droppable/tolerance.html
@@ -1,83 +1,83 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Droppable - tolerance</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>
- <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
- <style type="text/css">
- .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
- </style>
- <script type="text/javascript">
- $(function() {
-
- $("#draggable").draggable();
-
- $("#droppable").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- $("#droppable-fit").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- tolerance: 'fit',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- $("#droppable-pointer").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- tolerance: 'pointer',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- $("#droppable-touch").droppable({
- activeClass: 'ui-state-hover',
- hoverClass: 'ui-state-active',
- tolerance: 'touch',
- drop: function(event, ui) {
- $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
- }
- });
-
- });
- </script>
-</head>
-<body>
-
-<div id="draggable" class="ui-widget-content">
- <p>Drag me to my target</p>
-</div>
-
-<br clear="both" />
-
-<div id="droppable" class="ui-widget-header">
- <p>Default tolerance</p>
-</div>
-
-<div id="droppable-fit" class="ui-widget-header">
- <p>tolerance: 'fit'</p>
-</div>
-
-<div id="droppable-pointer" class="ui-widget-header">
- <p>tolerance: 'pointer'</p>
-</div>
-
-<div id="droppable-touch" class="ui-widget-header">
- <p>tolerance: 'touch'</p>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Droppable - tolerance</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>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <style type="text/css">
+ .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
+ .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $("#draggable").draggable();
+
+ $("#droppable").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ $("#droppable-fit").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ tolerance: 'fit',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ $("#droppable-pointer").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ tolerance: 'pointer',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ $("#droppable-touch").droppable({
+ activeClass: 'ui-state-hover',
+ hoverClass: 'ui-state-active',
+ tolerance: 'touch',
+ drop: function(event, ui) {
+ $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
+ }
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<div id="draggable" class="ui-widget-content">
+ <p>Drag me to my target</p>
+</div>
+
+<br clear="both" />
+
+<div id="droppable" class="ui-widget-header">
+ <p>Default tolerance</p>
+</div>
+
+<div id="droppable-fit" class="ui-widget-header">
+ <p>tolerance: 'fit'</p>
+</div>
+
+<div id="droppable-pointer" class="ui-widget-header">
+ <p>tolerance: 'pointer'</p>
+</div>
+
+<div id="droppable-touch" class="ui-widget-header">
+ <p>tolerance: 'touch'</p>
+</div>
+
+</body>
+</html>
diff --git a/demos/sortable/connectwith.html b/demos/sortable/connectwith.html
index 3744cb61a..b3ac6c409 100644
--- a/demos/sortable/connectwith.html
+++ b/demos/sortable/connectwith.html
@@ -1,41 +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>
+<!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>
diff --git a/demos/sortable/default.html b/demos/sortable/default.html
index c87e32cd7..6f68cfa81 100644
--- a/demos/sortable/default.html
+++ b/demos/sortable/default.html
@@ -1,36 +1,36 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Sortable - 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.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").sortable();
- });
- </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>
- <li class="ui-state-default">Item 6</li>
- <li class="ui-state-default">Item 7</li>
- <li class="ui-state-default">Item 8</li>
- <li class="ui-state-default">Item 9</li>
- <li class="ui-state-default">Item 10</li>
-</ul>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - 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.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").sortable();
+ });
+ </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>
+ <li class="ui-state-default">Item 6</li>
+ <li class="ui-state-default">Item 7</li>
+ <li class="ui-state-default">Item 8</li>
+ <li class="ui-state-default">Item 9</li>
+ <li class="ui-state-default">Item 10</li>
+</ul>
+
+</body>
+</html>
diff --git a/demos/sortable/delaydistance.html b/demos/sortable/delaydistance.html
index d12d65e5f..19695d9bf 100644
--- a/demos/sortable/delaydistance.html
+++ b/demos/sortable/delaydistance.html
@@ -1,51 +1,51 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Sortable - Delay / Distance</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; margin-bottom: 20px; }
- li { margin: 3px; padding: 2px; }
- </style>
- <script type="text/javascript">
- $(function() {
-
- $("ul:eq(0)").sortable({
- delay: 1000
- });
-
- $("ul:eq(1)").sortable({
- distance: 50
- });
-
- });
- </script>
-</head>
-<body>
-
-<p>Delay of 1000ms</p>
-
-<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>
-
-<p>Distance of 50px</p>
-
-<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>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Delay / Distance</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; margin-bottom: 20px; }
+ li { margin: 3px; padding: 2px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $("ul:eq(0)").sortable({
+ delay: 1000
+ });
+
+ $("ul:eq(1)").sortable({
+ distance: 50
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+<p>Delay of 1000ms</p>
+
+<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>
+
+<p>Distance of 50px</p>
+
+<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>
+
+</body>
+</html>
diff --git a/demos/sortable/droponempty.html b/demos/sortable/droponempty.html
index 1a0202c22..6d1a9b95c 100644
--- a/demos/sortable/droponempty.html
+++ b/demos/sortable/droponempty.html
@@ -1,51 +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>
+<!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>
diff --git a/demos/sortable/floating.html b/demos/sortable/floating.html
index d0e48071b..6f940929b 100644
--- a/demos/sortable/floating.html
+++ b/demos/sortable/floating.html
@@ -1,38 +1,38 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Sortable - Floating</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; float: left; width: 100px; height: 100px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("ul").sortable();
- });
- </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>
- <li class="ui-state-default">Item 6</li>
- <li class="ui-state-default">Item 7</li>
- <li class="ui-state-default">Item 8</li>
- <li class="ui-state-default">Item 9</li>
- <li class="ui-state-default">Item 10</li>
- <li class="ui-state-default">Item 11</li>
- <li class="ui-state-default">Item 12</li>
-</ul>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Floating</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; float: left; width: 100px; height: 100px; }
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("ul").sortable();
+ });
+ </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>
+ <li class="ui-state-default">Item 6</li>
+ <li class="ui-state-default">Item 7</li>
+ <li class="ui-state-default">Item 8</li>
+ <li class="ui-state-default">Item 9</li>
+ <li class="ui-state-default">Item 10</li>
+ <li class="ui-state-default">Item 11</li>
+ <li class="ui-state-default">Item 12</li>
+</ul>
+
+</body>
+</html>
diff --git a/demos/sortable/items.html b/demos/sortable/items.html
index 810daf554..ac08a0791 100644
--- a/demos/sortable/items.html
+++ b/demos/sortable/items.html
@@ -1,49 +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>
-
-<p>Completely exclude items from the sorting logic using the 'items' option</p>
-
-<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>
-
-<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>
-
-<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>
-
-</body>
-</html>
+<!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>
+
+<p>Completely exclude items from the sorting logic using the 'items' option</p>
+
+<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>
+
+<p>Keep the items as valid targets, but non-draggable, using the 'cancel' option</p>
+
+<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>
+
+</body>
+</html>
diff --git a/demos/sortable/placeholder.html b/demos/sortable/placeholder.html
index 6a4e70dca..68d6ecdbe 100644
--- a/demos/sortable/placeholder.html
+++ b/demos/sortable/placeholder.html
@@ -1,38 +1,38 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Sortable - Placeholder</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").sortable({
- placeholder: 'ui-state-highlight'
- });
- });
- </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>
- <li class="ui-state-default">Item 6</li>
- <li class="ui-state-default">Item 7</li>
- <li class="ui-state-default">Item 8</li>
- <li class="ui-state-default">Item 9</li>
- <li class="ui-state-default">Item 10</li>
-</ul>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Sortable - Placeholder</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").sortable({
+ placeholder: 'ui-state-highlight'
+ });
+ });
+ </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>
+ <li class="ui-state-default">Item 6</li>
+ <li class="ui-state-default">Item 7</li>
+ <li class="ui-state-default">Item 8</li>
+ <li class="ui-state-default">Item 9</li>
+ <li class="ui-state-default">Item 10</li>
+</ul>
+
+</body>
+</html>