aboutsummaryrefslogtreecommitdiffstats
path: root/demos/draggable
diff options
context:
space:
mode:
authorRichard Worth <rdworth@gmail.com>2009-01-16 05:48:19 +0000
committerRichard Worth <rdworth@gmail.com>2009-01-16 05:48:19 +0000
commitfbc962faf66f793228bd5e3f62f7f1d2932d3715 (patch)
tree5ea0fa46a98bf35abec5a2549fbe815f8a6dbc50 /demos/draggable
parent02358dc5f25d331257e0788c721a0f571d79e95f (diff)
downloadjquery-ui-fbc962faf66f793228bd5e3f62f7f1d2932d3715.tar.gz
jquery-ui-fbc962faf66f793228bd5e3f62f7f1d2932d3715.zip
demos/draggable: removed old demo files
Diffstat (limited to 'demos/draggable')
-rw-r--r--demos/draggable/axis.html43
-rw-r--r--demos/draggable/cancel.html40
-rw-r--r--demos/draggable/containment.html16
-rw-r--r--demos/draggable/containment_iframe.html49
-rw-r--r--demos/draggable/cursorat.html46
-rw-r--r--demos/draggable/delaydistance.html41
-rw-r--r--demos/draggable/grid.html41
-rw-r--r--demos/draggable/helper.html52
-rw-r--r--demos/draggable/opacity.html41
-rw-r--r--demos/draggable/snap.html68
-rw-r--r--demos/draggable/zindexstack.html52
11 files changed, 0 insertions, 489 deletions
diff --git a/demos/draggable/axis.html b/demos/draggable/axis.html
deleted file mode 100644
index da78902aa..000000000
--- a/demos/draggable/axis.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Axis Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable, #draggable2 { 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 class="demo">
-
-<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>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-</body>
-</html>
diff --git a/demos/draggable/cancel.html b/demos/draggable/cancel.html
deleted file mode 100644
index ff0d8d69e..000000000
--- a/demos/draggable/cancel.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Cancel Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable { width: 150px; height: 150px; padding: 0.5em; cursor: move; }
- #draggable p.ui-widget-header { cursor: default; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#draggable").draggable({ cancel: "p.ui-widget-header" });
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
-
-<div id="draggable" class="ui-widget-content">
- <p>You can drag me around&hellip;</p>
- <p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-
-</body>
-</html>
diff --git a/demos/draggable/containment.html b/demos/draggable/containment.html
deleted file mode 100644
index 7832e547d..000000000
--- a/demos/draggable/containment.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Containment Demo</title>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css" media="screen">
- body,html {
- padding:0;margin:0;width:100%;height:100%;
- }
- </style>
-</head>
-<body>
-<iframe frameborder='0' style='width: 100%; height: 99%;' src='containment_iframe.html'></iframe>
-
-</body>
-</html>
diff --git a/demos/draggable/containment_iframe.html b/demos/draggable/containment_iframe.html
deleted file mode 100644
index 7416afb10..000000000
--- a/demos/draggable/containment_iframe.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Containment Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- div.demo { padding:0; }
- .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin:0 10px 0 0; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#draggable").draggable({ containment: 'window', scroll: false });
- $("#draggable2").draggable({ containment: 'document' });
- $("#draggable3").draggable({ containment: 'parent' });
- });
- </script>
-</head>
-<body>
-<div class="demo">
-
-<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><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-<div style='width: 1px; height: 500px;'></div>
-
-</body>
-</html>
diff --git a/demos/draggable/cursorat.html b/demos/draggable/cursorat.html
deleted file mode 100644
index 5a389309e..000000000
--- a/demos/draggable/cursorat.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - cursorAt Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable, #draggable2, #draggable3 { 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 class="demo">
-
-<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>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-</body>
-</html>
diff --git a/demos/draggable/delaydistance.html b/demos/draggable/delaydistance.html
deleted file mode 100644
index 8a1a097f2..000000000
--- a/demos/draggable/delaydistance.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Delay / Distance Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable, #draggable2 { width: 120px; height: 120px; 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 class="demo">
-
-<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>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-</body>
-</html>
diff --git a/demos/draggable/grid.html b/demos/draggable/grid.html
deleted file mode 100644
index a572f5546..000000000
--- a/demos/draggable/grid.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Grid Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable, #draggable2 { 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 class="demo">
-
-<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>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-</body>
-</html>
diff --git a/demos/draggable/helper.html b/demos/draggable/helper.html
deleted file mode 100644
index b6832c7af..000000000
--- a/demos/draggable/helper.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Helper Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable, #draggable2, #draggable3 { 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({
- cursor: 'move',
- cursorAt: { top: -12, left: -20 },
- helper: function(event) {
- return $('<div class="ui-widget-header">I\'m a custom helper</div>');
- }
- });
- });
- </script>
-</head>
-<body>
-<div class="demo">
-
-<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>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-</body>
-</html>
diff --git a/demos/draggable/opacity.html b/demos/draggable/opacity.html
deleted file mode 100644
index 208a01fc3..000000000
--- a/demos/draggable/opacity.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Opacity Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable1, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
- </style>
- <script type="text/javascript">
- $(function() {
- $("#draggable1").draggable({ opacity: 0.5 });
- $("#draggable2").draggable({ opacity: 0.5, helper: 'clone' });
- });
- </script>
-</head>
-<body>
-<div class="demo">
-
-<div id="draggable1" 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>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-</body>
-</html>
diff --git a/demos/draggable/snap.html b/demos/draggable/snap.html
deleted file mode 100644
index 7eeca6229..000000000
--- a/demos/draggable/snap.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Snap Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable, #draggable2, #draggable3, #draggable4, #draggable5 { width: 100px; height: 80px; padding: 5px; float: left; margin: 5px; font-size: .9em; }
- .ui-widget-header p, .ui-widget-content p { margin: 0; }
- #snaptarget { height: 140px; }
- </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="demo">
-
-<div id="snaptarget" 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>
-
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-
-
-
-</body>
-</html>
diff --git a/demos/draggable/zindexstack.html b/demos/draggable/zindexstack.html
deleted file mode 100644
index a455308a0..000000000
--- a/demos/draggable/zindexstack.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>jQuery UI Draggable - Z-Index / Stack Demo</title>
- <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="../../jquery-1.3.js"></script>
- <script type="text/javascript" src="../../ui/ui.core.js"></script>
- <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
- <link type="text/css" href="../demos.css" rel="stylesheet" />
- <style type="text/css">
- #draggable, #set, #set div { 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 class="demo">
-
-<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>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-</body>
-</html>