New - Pastie

Language:

## mark a section (Learn more)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://www.google.com/jsapi"></script> <script> // Load prototype + scriptaculous google.load("prototype", "1.6"); google.load("scriptaculous", "1.8.1"); </script> </head> <body> <style type="text/css"> * { margin:0; padding:0; } #test_container{ width: 600px; padding: 10px; } #droppable_demo{ width:160px; height:120px; font-size: 15px; background:white; border:5px solid gray; text-align:center; float: right; } .draggable { background: yellowgreen; border: 3px solid green; cursor: move; } li { list-style:none; float:left; width: 100px; height: 100px; margin: 8px; } img { width:100%; } .spaceHolder { background: orange; border: 3px solid orangered; font-size: 15px; } #droppable_demo.hover { border:5px dashed orange !important; background:lightgray; } #dragContainer { background: yellow; border:5px solid black; float: left; width: 280px; height: 120px; overflow: auto; /*This is where the weirdness happens*/ } #notes { float: left; background: lightcyan; width: 600px; padding: 10px; margin-top: 10px; } h3, h4, p { margin: 8px 0 0; } </style> <div id="test_container"> <ul id="dragContainer"> <li> <a title="" href="#"> <img src="http://farm2.static.flickr.com/1243/531098056_d0ba013e23_s.jpg" alt="" title="" class='draggable' id='draggable_demo'/>  </a> </li>  <li class="spaceHolder"> Space Holder </li> <li class="spaceHolder"> Space Holder </li> <li class="spaceHolder"> Space Holder </li> </ul> <ul id="droppable_demo"> Drop here! </ul> </div> <div id="notes"> <h3>This is a working example of what seems to be a fix for dragging from an overflowed container</h3> <p>Drag the image to test that the image does not slide under the container</p> <p>Scroll the container to test that the draggable does not remain fixed</p> <h3>Here is how it works:</h3> <p>In IE7 and IE6, for draggable elements to scroll successfully in an overflowed container, the container must be styled with position:relative. However, when dragging, the container needs to be styled with position:static. In addition, ghosting must be set to false for IE and true for all others. This test case demonstrates a fix that sets ghosting to false for IE, then onStart the dragContainer position is set to static, and onEnd it is reverted to relative</p> <p>There are quite a few comments in the HTML</p> <b>Enjoy!</b> </div> <script type="text/javascript"> // Do special js for IE if(navigator.userAgent.indexOf("MSIE") != -1) { document.getElementById("dragContainer").style.position = "relative"; // needed so that draggables scroll new Draggable('draggable_demo', { revert: true, ghosting: false, // IE hates ghosting it seems // ie needs to change the position style of dragContainer from static to relative on drag start so that the images can be dragged successfully from an overflowed container. onStart: function() { document.getElementById("dragContainer").style.position = "static"; }, onEnd: function() { document.getElementById("dragContainer").style.position = "relative"; } }); } // Do normal stuff for browsers that are not IE else { new Draggable('draggable_demo', { revert: true, ghosting: true }); }; Droppables.add('droppable_demo', { accept: 'draggable', hoverclass: 'hover', onDrop: function() { $('droppable_demo').highlight(); } }); </script> </body> </html>