Aquí está el trato:

Estoy tratando de hacer que un selector de color se parezca mucho a Photoshop, por lo que tengo una imagen de fondo de un selector de color (imagen de arco iris de 200x200 px) y un disparador circular dentro de él.

Entonces, si adjunto una IU arrastrable a un círculo:

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

Funciona genial. Pero aquí hay otro problema ... Quiero que el arrastre comience cuando haga clic en el bloque principal del círculo (es decir, la imagen del selector de color).

Aquí está el marcado HTML:

<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>

Entonces, cuando hago clic en .inner2, quiero que .circle comience a arrastrar.

He intentado

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

Pero eso no funciona :( ¿Alguien se encontró con este problema?

Gracias