#244429 - Pastie

<!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>