diff options
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> |