jquery start dragging object when clicked on the other

Question

Hi all, here's the deal:

I'm trying to make a colorpicker act much like in Photoshop, so I have a background image of a color picker (rainbow-like image 200x200 px) and a circle trigger inside of it.

So, if i attach a draggable UI to a circle:

$('#rainbow-color-picker .circle').draggable({containment: 'parent'});

Works great. But here's another issue.. I want the drag to start when I click the parent block of the circle (i.e. the color picker image).

Here's the HTML markup:

<div class='rainbow-color-picker' id='rainbow-color-picker'><div class='inner1'><div class='inner2'>
 <div class='circle'><div class='circle-inner'></div></div>
</div></div></div>

So when I click on .inner2, I want .circle to start dragging.

I've tried

$("#rainbow-color-picker .inner2").bind( "mousedown", function(event) {  
  $("#rainbow-color-picker .circle").trigger('dragstart');  
});

But that doesn't work :( did anyone happen to meet this problem?

Thanks