]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 84e9175)
demos: first bunch of draggable demos (default, axis, grid, containment)
authorPaul Bakaus <paul.bakaus@googlemail.com>
Tue, 30 Dec 2008 08:48:19 +0000 (08:48 +0000)
committerPaul Bakaus <paul.bakaus@googlemail.com>
Tue, 30 Dec 2008 08:48:19 +0000 (08:48 +0000)
demos/draggable/axis.html [new file with mode: 0644] patch | blob
demos/draggable/containment.html [new file with mode: 0644] patch | blob
demos/draggable/default.html [new file with mode: 0644] patch | blob
demos/draggable/grid.html [new file with mode: 0644] patch | blob
demos/draggable/index.html patch | blob | history

diff --git a/demos/draggable/axis.html b/demos/draggable/axis.html
new file mode 100644 (file)
index 0000000..2615496
--- /dev/null
+++ b/demos/draggable/axis.html
@@ -0,0 +1,33 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Draggable - Constrained to one axis</title>\r
+       <link type="text/css" href="../demos.css" rel="stylesheet" />\r
+       <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
+       <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
+       <style type="text/css">\r
+       .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
+       #draggable { cursor: n-resize; }\r
+       #draggable2 { cursor: e-resize; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               $("#draggable").draggable({ axis: 'y' });\r
+               $("#draggable2").draggable({ axis: 'x' });\r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>I can be dragged only vertically</p>\r
+</div>\r
+\r
+<div id="draggable2" class="ui-widget-content">\r
+       <p>I can be dragged only horizontally</p>\r
+</div>\r
+\r
+</body>\r
+</html>\r
diff --git a/demos/draggable/containment.html b/demos/draggable/containment.html
new file mode 100644 (file)
index 0000000..09a6a49
--- /dev/null
+++ b/demos/draggable/containment.html
@@ -0,0 +1,38 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Draggable - Grid</title>\r
+       <link type="text/css" href="../demos.css" rel="stylesheet" />\r
+       <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
+       <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
+       <style type="text/css">\r
+       .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               $("#draggable").draggable({ containment: 'window' });\r
+               $("#draggable2").draggable({ containment: 'document' });\r
+               $("#draggable3").draggable({ containment: 'parent' });\r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>I'm contained within the window</p>\r
+</div>\r
+\r
+<div id="draggable2" class="ui-widget-content">\r
+       <p>I'm contained within the document</p>\r
+</div>\r
+\r
+<div class="ui-widget-content">\r
+       <p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>\r
+</div>\r
+\r
+<div style='width: 1px; height: 500px;'></div>\r
+\r
+</body>\r
+</html>\r
diff --git a/demos/draggable/default.html b/demos/draggable/default.html
new file mode 100644 (file)
index 0000000..a8c124d
--- /dev/null
+++ b/demos/draggable/default.html
@@ -0,0 +1,26 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Draggable - Default Demo</title>\r
+       <link type="text/css" href="../demos.css" rel="stylesheet" />\r
+       <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
+       <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
+       <style type="text/css">\r
+       #draggable { width: 150px; height: 150px; padding: 0.5em; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               $("#draggable").draggable();\r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>Drag me around</p>\r
+</div>\r
+\r
+</body>\r
+</html>\r
diff --git a/demos/draggable/grid.html b/demos/draggable/grid.html
new file mode 100644 (file)
index 0000000..ec5c9d3
--- /dev/null
+++ b/demos/draggable/grid.html
@@ -0,0 +1,31 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Draggable - Grid</title>\r
+       <link type="text/css" href="../demos.css" rel="stylesheet" />\r
+       <link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />\r
+       <script type="text/javascript" src="../../jquery-1.2.6.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.core.js"></script>\r
+       <script type="text/javascript" src="../../ui/ui.draggable.js"></script>\r
+       <style type="text/css">\r
+       .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               $("#draggable").draggable({ grid: [20,20] });\r
+               $("#draggable2").draggable({ grid: [1,50] });\r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>I can be dragged in a 20x20 grid system</p>\r
+</div>\r
+\r
+<div id="draggable2" class="ui-widget-content">\r
+       <p>I only follow a vertical 50 pixel grid</p>\r
+</div>\r
+\r
+</body>\r
+</html>\r
diff --git a/demos/draggable/index.html b/demos/draggable/index.html
index e68d32cc445592d05f1b308aa8f02f8cfc160f5c..f1548ccaa03113b597454c54b1dbdb14283f08d3 100644 (file)
--- a/demos/draggable/index.html
+++ b/demos/draggable/index.html
@@ -9,6 +9,9 @@
 <dl class="demos-nav">
        <dt>Draggable</dt>
                <dd><a href="default.html">Default</a></dd>
+               <dd><a href="axis.html">Axis</a></dd>
+               <dd><a href="grid.html">Grid</a></dd>
+               <dd><a href="containment.html">Containment</a></dd>
 </dl>
 
 </body>
The official jQuery user interface library: https://github.com/jquery/jquery-ui