draggable clone helper appears in wrong position

Hi,

Having a strange problem with draggable divs.

I have a div containing a series of floated elements. These elements are all floated left, with each odd element clearing the previous, so that they're arranged in a 2-column display down the page.

I make each one draggable, but on doing so, when I drag the elements, the cloned helper that appears only ever appears positioned where the first draggable is (e.g. the upper leftmost element).

This is fine for the first element, but not as expected for the others. Dragging a later element shows its clone positioned at the first element with a huge offset from where the actual mouse is.

Have tried this with 1.6rc1 and stable 1.5.1 - both show same behaviour.

Occurs in FF3.01, IE7 and Google Chrome 0.2.149.30

Here's example code:

JS:

$(document).ready(function() {
	$(".dragWidget").each(function() {
		$(this).draggable({helper: 'clone'});
	});
});

XHTML:

        	<div class="dragWidget"><div class="column186Left">widget 1</div></div>
            <div class="dragWidget"><div class="column186Right">widget 2</div></div>
            <div class="dragWidget"><div class="column186Left">widget 3</div></div>
            <div class="dragWidget"><div class="column186Right">widget 4</div></div>

CSS:

.column186Left {
	width: 186px;
	margin: 0 5px 4px 0;
	float: left;
	background-color:#FF0000;
	clear:left;
}

.column186Right {
	width: 186px;
	margin: 0 0 0 0;
	float: left;
	background-color:#FF0000;
}