Problems with drag/drop of different sizes

Problems with drag/drop of different sizes

I'm trying to make horizontal pane sorting but the target area is messed up.

It's most messed up with the "middle" element that's 50% width.

http://jsfiddle.net/Yz9V3/106/

clcik left/middle/right and translucent blue bars appear between them.  On hovering them, they light up(you'll see this is BADLY misaligned and is the problem I'm facing).  Let go of the mouse to trigger the drop and they sort.

Anyone have ideas on how to make this work?
Seems like a jquery ui problem :/