jquery drag...container question...

[RIRedinPA]

if I am doing a grid layout with some code like this:

 

<div id="results">

<?php 
print "<div id=\"row\">
$col = 0; 
for($x=0; x<10; x++) {
$col++;
if ($x < 10) { 
if ($col < 4) { 
print "<p class=\"rowitem ui-widget-content\"><img src=\"images/imagefromdb.jpg\"></p>";
} else { 
print "</div><div id=\"row\">";
} 
} else {
if ($col < 4) { 
print "<p class=\"rowitem ui-widget-content\"><img src=\"images/imagefromdb.jpg\"></p>";
} else { 
print "</div>"; 
} 

}
?>
</div>

 

How can I get the drag to happen within the #results div and not within each #row div?

 

Here's my javascript:

 

$(document).ready(function(){

	//init draggable stuff
	$(function() {
		$(".rowitem").draggable({ containment: '#results' });
	});
});

 

With this I can only drag the item around the #row div, going right or down past it's margins causes the scrollbars to appear. I tried containment: parent and containment: window with the same results. I want to drag these out of the div and into a reserved drop area. Is there another approach I should be taking?