diff options
| author | Richard Worth <rdworth@gmail.com> | 2008-12-30 15:51:51 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2008-12-30 15:51:51 +0000 |
| commit | 9fc23e11080da1422403c762383c9b4bd1f6457e (patch) | |
| tree | 72dac0ca1fbcd8a24e29466e557f3a942eb43660 /demos/draggable | |
| parent | d87a60ec57ed131e86e2a706921840d40741f732 (diff) | |
| download | jquery-ui-9fc23e11080da1422403c762383c9b4bd1f6457e.tar.gz jquery-ui-9fc23e11080da1422403c762383c9b4bd1f6457e.zip | |
set svn:eol-style to native
Diffstat (limited to 'demos/draggable')
| -rw-r--r-- | demos/draggable/axis.html | 66 | ||||
| -rw-r--r-- | demos/draggable/containment.html | 76 | ||||
| -rw-r--r-- | demos/draggable/cursorat.html | 72 | ||||
| -rw-r--r-- | demos/draggable/default.html | 52 | ||||
| -rw-r--r-- | demos/draggable/delaydistance.html | 62 | ||||
| -rw-r--r-- | demos/draggable/grid.html | 62 | ||||
| -rw-r--r-- | demos/draggable/handle.html | 54 | ||||
| -rw-r--r-- | demos/draggable/helper.html | 82 | ||||
| -rw-r--r-- | demos/draggable/opacity.html | 62 | ||||
| -rw-r--r-- | demos/draggable/revert.html | 62 | ||||
| -rw-r--r-- | demos/draggable/scroll.html | 76 | ||||
| -rw-r--r-- | demos/draggable/snap.html | 114 | ||||
| -rw-r--r-- | demos/draggable/zindexstack.html | 84 |
13 files changed, 462 insertions, 462 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> |