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