12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <!doctype html>
- <html>
- <head>
- <!-- a test for issue 37 (and part of 23)-->
- <style type="text/css">
- #container { position:relative; overflow:scroll; width:30em; height:30em; border:1px dotted red; margin-top:4em;}
- .window { position:absolute; width:5em; height:5em; background-color:blue; z-index:2;}
- .oWindow { background-color:red; }
- .oWindow2 { background-color:yellow; }
- #window1 { left:5em; top:5em; }
- #window2 { left:15em; top:15em; }
- #window3 { left:25em; top:25em; }
- #window4 { left:20em; top:20em; z-index:10;}
- #window5 { left:10em; top:6em; }
- .spot { width:1em; height:1em; background-color:green; position:absolute;z-index:13;}
- .testHover { border:1px dotted black; }
- #debug { overflow:auto; width:20em; position:absolute; right:0; border:1px dotted blue;height:30em;z-index:10;top:0;margin-top:4em;}
- </style>
- </head>
- <body>
- <div id="container">
- <div id="window1" class="window"></div>
- <div id="window2" class="window"></div>
- <div id="window3" class="window"></div>
-
- <div id="window4" class="window oWindow">drop me on the yellow square.</div>
- <div id="window5" class="window oWindow2">drop the red square on me.</div>
- <div id="spot1" class="spot"></div>
- <div id="spot2" class="spot"></div>
- </div>
-
- <div id="debug"></div>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- document.onselectstart = function () { return false; };
- var container = $("#container"), w4 = $("#window4"), w5 = $("#window5"), debug = $("#debug");
- var s1 = $("#spot1"), s2 = $("#spot2"), w4w = w4.outerWidth(), w4h = w4.outerHeight();
- w4.draggable({
- start : function() { debug.html(""); },
- drag : function(e, ui) {
- var o = w4.offset()
- // now attempt to position the spots at the tl and br corners of w4.
- s1.offset(o);
- s2.offset({left:o.left + w4w, top:o.top+w4h});
- },
- scope:"testjquerydrag",
- cursor:"move"
- });
- w5.droppable({
- scope:"testjquerydrag",
- hoverClass:"testHover",
- drop : function() { debug.html("red square dropped."); },
- });
- });
- </script>
-
- </body>
- </html>
|