Javascript-форум - JQuery UI drag'n'drop

Добрый день.
Столкнулся с проблемой при работе с jquery ui droppable.
Есть два контейнера содержащие элементы. Элементы можно перетаскивать из одного контейнера в другой.
выглядит это так:

Проблемы начинаются тогда, когда контейнеры пересекают друг друга. Вот так:

А именно, как видно из рисунка, у контейнеров есть область пересечения. И если начать перемещать элементы внутри контейнера два и при этом оставаться в области пересечения двух контейнеров, то элементы перемещаются в первый контейнер.
Так вот тут и возникает вопрос, как избавиться от этого эффекта?

Вот код, контейнеры можно перемещать для наглядности.

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script>
	<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js"></script>
    <style type="text/css">
		#container1, #container2 {
			position: relative;
			width: 240px;
			height: 440px;
			top: 10px;
			border: 1px solid black;
		}
		
		li {
			border: 1px solid black;
			height: 30px;
			width: 70px;
			margin: 1px;
		}
		
		ul {
			list-style:none;
		}
		
		#container1 {
			left: 10px;
			background-color: green;
		}
		
		#container2 {
			left: 10px;
			background-color: gold;
		}
		
	</style>
		<script type="text/javascript">
			$(document).ready(function() {
				var $c1 = $('#container1'), $c2 = $('#container2');
				
				$c1.draggable();
				$c2.draggable();
					
				$('li').draggable({
					revert: 'invalid',
					//helper: 'clone',
					cursor: 'move',
				});


				$c1.droppable({
					accept: '#container2 li',
					drop: function(ev, ui) {
						dropItem(ui.draggable, $c1);
					}
				});

				$c2.droppable({
					accept: '#container1 li',
					drop: function(ev, ui) {
						dropItem(ui.draggable, $c2);
					}
				});

				function dropItem($item, $container) {
						$item.css('top','0px').css('left','0px');
						var $list = $container.find('ul');
						$list.length ? $list.append($item) : $('<ul />').appendTo($container).append($item);
				}
			});
		</script>
</head>
<body>	
		<div id="container1">
		container1
			<ul>
				<li>Box 1_1</li>
				<li>Box 1_2</li>
				<li>Box 1_3</li>
				<li>Box 1_4</li>
			</ul>
		</div>
		
		<div id="container2">
		container2
			<ul>
				<li>Box 2_1</li>
				<li>Box 2_2</li>
				<li>Box 2_3</li>
				<li>Box 2_4</li>
			</ul>
		</div>

</body>
</html>