]> 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: cd20e99)
demos: added droppable demos
authorPaul Bakaus <paul.bakaus@googlemail.com>
Tue, 30 Dec 2008 13:13:37 +0000 (13:13 +0000)
committerPaul Bakaus <paul.bakaus@googlemail.com>
Tue, 30 Dec 2008 13:13:37 +0000 (13:13 +0000)
demos/droppable/accept.html [new file with mode: 0644] patch | blob
demos/droppable/activeclass.html [new file with mode: 0644] patch | blob
demos/droppable/default.html [new file with mode: 0644] patch | blob
demos/droppable/greedy.html [new file with mode: 0644] patch | blob
demos/droppable/hoverclass.html [new file with mode: 0644] patch | blob
demos/droppable/index.html patch | blob | history
demos/droppable/tolerance.html [new file with mode: 0644] patch | blob

diff --git a/demos/droppable/accept.html b/demos/droppable/accept.html
new file mode 100644 (file)
index 0000000..a4ccfee
--- /dev/null
+++ b/demos/droppable/accept.html
@@ -0,0 +1,49 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Droppable - accept</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
+       <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
+       <style type="text/css">\r
+       .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
+       .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               \r
+               $("#draggable,#draggable-nonvalid").draggable();\r
+               \r
+               $("#droppable").droppable({\r
+                       accept: '#draggable',\r
+                       activeClass: 'ui-state-hover',\r
+                       hoverClass: 'ui-state-active',\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable-nonvalid" class="ui-widget-content">\r
+       <p>I'm draggable but can't be dropped</p>\r
+</div>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>Drag me to my target</p>\r
+</div>\r
+\r
+\r
+\r
+<div id="droppable" class="ui-widget-header">\r
+       <p>accept: '#draggable'</p>\r
+</div>\r
+\r
+</body>\r
+</html>\r
diff --git a/demos/droppable/activeclass.html b/demos/droppable/activeclass.html
new file mode 100644 (file)
index 0000000..97cdee0
--- /dev/null
+++ b/demos/droppable/activeclass.html
@@ -0,0 +1,40 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Droppable - activeClass</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
+       <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
+       <style type="text/css">\r
+       .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
+       .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               $("#draggable").draggable();\r
+               $("#droppable").droppable({\r
+                       activeClass: 'ui-state-hover',\r
+                       hoverClass: 'ui-state-active',\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>Drag me to my target</p>\r
+</div>\r
+\r
+<div id="droppable" class="ui-widget-header">\r
+       <p>Drop here</p>\r
+</div>\r
+\r
+</body>\r
+</html>\r
diff --git a/demos/droppable/default.html b/demos/droppable/default.html
new file mode 100644 (file)
index 0000000..122f57e
--- /dev/null
+++ b/demos/droppable/default.html
@@ -0,0 +1,38 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Droppable - 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
+       <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
+       <style type="text/css">\r
+       .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
+       .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               $("#draggable").draggable();\r
+               $("#droppable").droppable({\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>Drag me to my target</p>\r
+</div>\r
+\r
+<div id="droppable" class="ui-widget-header">\r
+       <p>Drop here</p>\r
+</div>\r
+\r
+</body>\r
+</html>\r
diff --git a/demos/droppable/greedy.html b/demos/droppable/greedy.html
new file mode 100644 (file)
index 0000000..1ccf627
--- /dev/null
+++ b/demos/droppable/greedy.html
@@ -0,0 +1,64 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Droppable - greedy</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
+       <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
+       <style type="text/css">\r
+       #droppable,#droppable2 { width: 200px; height: 160px; padding: 0.5em; float: left; margin: 10px; }\r
+       #droppable-inner,#droppable2-inner { width: 140px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
+       .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               \r
+               $("#draggable").draggable();\r
+               \r
+               $("#droppable, #droppable-inner").droppable({\r
+                       activeClass: 'ui-state-hover',\r
+                       hoverClass: 'ui-state-active',\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+               $("#droppable2, #droppable2-inner").droppable({\r
+                       greedy: true,\r
+                       activeClass: 'ui-state-hover',\r
+                       hoverClass: 'ui-state-active',\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>Drag me to my target</p>\r
+</div>\r
+\r
+\r
+\r
+<div id="droppable" class="ui-widget-header">\r
+       <p>Outer droppable (greedy deactivated)</p>\r
+       <div id="droppable-inner" class="ui-widget-header">\r
+               <p>Inner droppable (greedy deactivated)</p>\r
+       </div>\r
+</div>\r
+\r
+<div id="droppable2" class="ui-widget-header">\r
+       <p>Outer droppable (greedy deactivated)</p>\r
+       <div id="droppable2-inner" class="ui-widget-header">\r
+               <p>Inner droppable (greedy deactivated)</p>\r
+       </div>\r
+</div>\r
+\r
+</body>\r
+</html>\r
diff --git a/demos/droppable/hoverclass.html b/demos/droppable/hoverclass.html
new file mode 100644 (file)
index 0000000..d71abd4
--- /dev/null
+++ b/demos/droppable/hoverclass.html
@@ -0,0 +1,39 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Droppable - hoverClass</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
+       <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
+       <style type="text/css">\r
+       .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
+       .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               $("#draggable").draggable();\r
+               $("#droppable").droppable({\r
+                       hoverClass: 'ui-state-active',\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>Drag me to my target</p>\r
+</div>\r
+\r
+<div id="droppable" class="ui-widget-header">\r
+       <p>Drop here</p>\r
+</div>\r
+\r
+</body>\r
+</html>\r
diff --git a/demos/droppable/index.html b/demos/droppable/index.html
index 15b655119ab5ed18dff6f33a45bd981fe6b4d8ca..f969f49e96530949398e89f3a669da0f711a6be2 100644 (file)
--- a/demos/droppable/index.html
+++ b/demos/droppable/index.html
@@ -10,6 +10,11 @@
        <h4>Droppable</h4>
        <ul>
                <li class="demo-config-on"><a href="default.html">Default</a></li>
+               <li><a href="accept.html">accept</a></li>
+               <li><a href="hoverclass.html">hoverClass</a></li>
+               <li><a href="activeclass.html">activeClass</a></li>
+               <li><a href="greedy.html">greedy</a></li>
+               <li><a href="tolerance.html">tolerance</a></li>
        </ul>
 </div>
 
diff --git a/demos/droppable/tolerance.html b/demos/droppable/tolerance.html
new file mode 100644 (file)
index 0000000..9f08934
--- /dev/null
+++ b/demos/droppable/tolerance.html
@@ -0,0 +1,83 @@
+<!doctype html>\r
+<html lang="en">\r
+<head>\r
+       <title>jQuery UI Droppable - tolerance</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
+       <script type="text/javascript" src="../../ui/ui.droppable.js"></script>\r
+       <style type="text/css">\r
+       .ui-widget-header { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }\r
+       .ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; }\r
+       </style>\r
+       <script type="text/javascript">\r
+       $(function() {\r
+               \r
+               $("#draggable").draggable();\r
+               \r
+               $("#droppable").droppable({\r
+                       activeClass: 'ui-state-hover',\r
+                       hoverClass: 'ui-state-active',\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+               $("#droppable-fit").droppable({\r
+                       activeClass: 'ui-state-hover',\r
+                       hoverClass: 'ui-state-active',\r
+                       tolerance: 'fit',\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+               $("#droppable-pointer").droppable({\r
+                       activeClass: 'ui-state-hover',\r
+                       hoverClass: 'ui-state-active',\r
+                       tolerance: 'pointer',\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+               $("#droppable-touch").droppable({\r
+                       activeClass: 'ui-state-hover',\r
+                       hoverClass: 'ui-state-active',\r
+                       tolerance: 'touch',\r
+                       drop: function(event, ui) {\r
+                               $(this).addClass('ui-state-highlight').find('p').html('Dropped!');\r
+                       }\r
+               });\r
+               \r
+       });\r
+       </script>\r
+</head>\r
+<body>\r
+\r
+<div id="draggable" class="ui-widget-content">\r
+       <p>Drag me to my target</p>\r
+</div>\r
+\r
+<br clear="both" />\r
+\r
+<div id="droppable" class="ui-widget-header">\r
+       <p>Default tolerance</p>\r
+</div>\r
+\r
+<div id="droppable-fit" class="ui-widget-header">\r
+       <p>tolerance: 'fit'</p>\r
+</div>\r
+\r
+<div id="droppable-pointer" class="ui-widget-header">\r
+       <p>tolerance: 'pointer'</p>\r
+</div>\r
+\r
+<div id="droppable-touch" class="ui-widget-header">\r
+       <p>tolerance: 'touch'</p>\r
+</div>\r
+\r
+</body>\r
+</html>\r
The official jQuery user interface library: https://github.com/jquery/jquery-ui