вот сделка:

Я пытаюсь заставить палитру вести себя так же, как в Photoshop, поэтому у меня есть фоновое изображение палитры цветов (изображение в виде радуги 200x200 px) и круговой триггер внутри него.

Итак, если я присоединяю перетаскиваемый интерфейс к кругу:

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

Работает отлично. Но вот еще одна проблема. Я хочу, чтобы перетаскивание начиналось, когда я щелкаю по родительскому блоку круга (то есть изображению палитры цветов).

Вот разметка 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>

Поэтому, когда я нажимаю на .inner2, я хочу, чтобы .circle начал перетаскивать.

я пробовал

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

Но это не работает :( Кто-нибудь сталкивался с этой проблемой?

Спасибо