]> 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: a42894b)
draggable: advanced visual representation of the new automated tests that can be...
authorPaul Bakaus <paul.bakaus@googlemail.com>
Sun, 23 Nov 2008 17:46:14 +0000 (17:46 +0000)
committerPaul Bakaus <paul.bakaus@googlemail.com>
Sun, 23 Nov 2008 17:46:14 +0000 (17:46 +0000)
tests/visual/draggable.scroll.html [new file with mode: 0644] patch | blob

diff --git a/tests/visual/draggable.scroll.html b/tests/visual/draggable.scroll.html
new file mode 100644 (file)
index 0000000..90ec325
--- /dev/null
+++ b/tests/visual/draggable.scroll.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
+<html>\r
+<head>\r
+<script src="../../jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>\r
+<script src="../../ui/ui.core.js" type="text/javascript" charset="utf-8"></script>\r
+<script src="../../ui/ui.draggable.js" type="text/javascript" charset="utf-8"></script>\r
+<script src="../../ui/ui.sortable.js" type="text/javascript" charset="utf-8"></script>\r
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />\r
+<title>jQuery UI Draggable Visual Test</title>\r
+</head>\r
+\r
+<body>\r
+ \r
+<style>\r
+       \r
+       .draggable {\r
+               width:100px;\r
+               height:100px;\r
+               background-color:green;\r
+               color: #fff;\r
+               padding: 5px;\r
+               margin: 5px;\r
+               border: 5px solid red;\r
+       }\r
+       \r
+       .container {\r
+               width: 500px;\r
+               height: 200px;\r
+               border: 5px solid black;\r
+               padding: 5px;\r
+               margin: 5px;\r
+               float: left;\r
+               background: #fff;\r
+       }\r
+       \r
+       .enlarge {\r
+               width: 1000px;\r
+               height: 1000px;\r
+       }\r
+\r
+\r
+</style>\r
+\r
+\r
+\r
+<script language="JavaScript">\r
+<!--\r
+       $(function(){\r
+               $(".draggable").draggable({\r
+                       //helper: 'clone',\r
+                       drag: function(e, ui) {\r
+                               //console.log(ui.helper.offset());\r
+                       },\r
+                       scroll:true\r
+                       //containment:"parent"\r
+               });\r
+       });\r
+//-->\r
+</script>\r
+\r
+\r
+\r
+<div class='container' style="overflow:scroll;">\r
+       <div class='draggable'>(Broken in IE)</div>\r
+       <div class='enlarge'></div>\r
+</div>\r
+\r
+<div class='container' style="overflow:scroll; position: relative;">\r
+       <div class='draggable'></div>\r
+       <div class='enlarge'></div>\r
+</div>\r
+\r
+<div class='container' style="overflow:scroll;">\r
+       <div class='draggable' style='position: absolute;top:0px;left:1000px;'>Absolute</div>\r
+       <div class='enlarge'></div>\r
+</div>\r
+\r
+<div class='container' style="overflow:scroll; position: relative;">\r
+       <div class='draggable' style='position: absolute;'>Absolute</div>\r
+       <div class='enlarge'></div>\r
+</div>\r
+\r
+<div class='container' style="overflow:scroll;">\r
+       <div class='draggable' style='position: fixed;'>Fixed</div>\r
+       <div class='enlarge'></div>\r
+</div>\r
+\r
+<div class='container' style="overflow:scroll; position: relative;">\r
+       <div class='draggable' style='position: fixed;'>Fixed</div>\r
+       <div class='enlarge'></div>\r
+</div>\r
+\r
+<!-- Relative draggable with two containers -->\r
+\r
+<div class='container' style="overflow:scroll; position: relative;">\r
+       <div class='container'>\r
+               <div class='draggable'>Relative</div>\r
+               <div class='enlarge'></div>\r
+       </div>\r
+\r
+</div>\r
+\r
+<div class='container' style="overflow:scroll; position: relative;">\r
+       <div class='container' style='position: relative;'>\r
+               <div class='draggable'>Relative</div>\r
+               <div class='enlarge'></div>\r
+       </div>\r
+</div>\r
+\r
+<div class='container' style="position: relative;">\r
+       <div class='container' style='overflow: scroll;'>\r
+               <div class='draggable'>Relative (Broken in IE)</div>\r
+               <div class='enlarge'></div>\r
+       </div>\r
+\r
+</div>\r
+\r
+<div class='container' style="position: relative;">\r
+       <div class='container' style='position: relative; overflow: scroll;'>\r
+               <div class='draggable'>Relative</div>\r
+               <div class='enlarge'></div>\r
+       </div>\r
+</div>\r
+\r
+<!-- Absolute draggable with two containers -->\r
+\r
+<div class='container' style="overflow:scroll; position: relative;">\r
+       <div class='container'>\r
+               <div class='draggable' style='position: absolute;'>Absolute</div>\r
+               <div class='enlarge'></div>\r
+       </div>\r
+\r
+</div>\r
+\r
+<div class='container' style="overflow:scroll; position: relative;">\r
+       <div class='container' style='position: relative;'>\r
+               <div class='draggable' style='position: absolute;'>Absolute</div>\r
+               <div class='enlarge'></div>\r
+       </div>\r
+</div>\r
+\r
+<div class='container' style="position: relative;">\r
+       <div class='container' style='overflow: scroll;'>\r
+               <div class='draggable' style='position: absolute;top:0px;left:0px;'>Absolute</div>\r
+               <div class='enlarge'></div>\r
+       </div>\r
+\r
+</div>\r
+\r
+<div class='container' style="position: relative;">\r
+       <div class='container' style='position: relative; overflow: scroll;'>\r
+               <div class='draggable' style='position: absolute;'>Absolute</div>\r
+               <div class='enlarge'></div>\r
+       </div>\r
+</div>\r
+       \r
+</body>\r
+</html>\r
The official jQuery user interface library: https://github.com/jquery/jquery-ui