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; } body { background: #333; } #test_container{ float:left; width: 100%; background: black; border-bottom: 4px solid #222; padding: 10px; } #droppable_demo{ width:160px; height:120px; font-size: 15px; background:white; border:5px solid gray; text-align:center; float: left; clear: left; } #droppable_demo.hover { border:5px dashed orange !important; background:lightgray; } h3, h4 { color: white; float: left; clear: left; padding: 10px 0; width: 40em; } img { cursor: move; } </style> <div id="test_container"> <ul> <img src="http://farm2.static.flickr.com/1243/531098056_d0ba013e23_s.jpg" alt="image" class='draggable' id='draggable_demo'/> </ul> <h3>To reproduce this bug, in ie7 or lower drag an image into the white container and hold it over the container for a few seconds</h3> <h4>Observe that the cursor gets the 'not-allowed' state and dropping cannot be resumed intuitively. Firefox and Safari behave appropriately.</h4> <ul id="droppable_demo"> Drop here! </ul> </div> <script type="text/javascript"> if(navigator.userAgent.indexOf("MSIE") != -1) new Draggable('draggable_demo', { revert: true, ghosting: false // ie sucks at ghosting }); 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>