#252270 - 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;
}

#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'/> <!-- In IE7 and IE6 alt and title tags must be blank so that the cursor does not transform into the 'not-allowed' state if held above the droppable for too long -->
			</a>
		</li>

		<!-- space holders added to create overflow -->
		<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>