Как программно запускать перетаскиваемое поведение

Я создал «2d слайдер» в jQuery, в котором 2 параметра управляются одновременно, перетаскивая «дескриптор» в ограничивающую рамку.

Я реализовал это, вложив div "дескриптор" в родительский div и используя плагин jQuery UI для облегчения перетаскивания. HTML-код выглядит так:

jQuery выглядит так:

$(".Slider2dHandle").draggable({
    containment: "parent",
    scroll: false,
    drag: function(event, ui) {
        // calculates position and updates value input boxes
    }
});

Я также создал код, который перемещает дескриптор в положение любых щелчков в родительском div:

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location
});

Я бы хотел изменить вышеуказанный метод, чтобы пользователь мог щелкнуть где-нибудь в родительском div, переместить дескриптор в место щелчка, а затем начните перетаскивать ручку, не отпуская кнопку мыши. По сути, мне нужно найти способ программно запустить функцию перетаскивания.

Я нашел несколько предложений здесь и здесь , и попытался реализовать их рекомендации, изменив описанный выше метод следующим образом:

$(".Slider2d").mousedown(function(event){
    // get location of click and reposition handle to click location
    handle = $(".Slider2d").children(".Slider2dHandle");
    handle.trigger(event);
});

Это работает в техническом смысле, но он очень медленный, и я получаю кучу сообщений об ошибках от Safari, в которых говорится: «RangeError: Превышен максимальный размер стека вызовов». Я думаю, что происходит следующее: когда я запускаю событие на дескрипторе, оно всплывает до родителя, который затем снова вызывает триггер и так далее, и так далее. Я попытался остановить всплытие, добавив в свой код event.stopPropagation до и после вызова .trigger (), но безуспешно.

Итак, если у кого-то есть предложения о том, как заставить это работать, я был бы очень признателен. У меня есть план резервного копирования здесь , но он кажется мне излишне сложным.

Спасибо!