Как привязать JQuery, перетаскиваемый к событию при наведении

Question

Мне трудно найти решение для следующего эффекта.

Представьте себе контейнер " # контейнер"содержащий:

• Элемент" # element", который должен быть перетаскиваемым только по горизонтали и внутри его родителя (" # container")
• Дескриптор" # handler", который должен быть перетаскивающим дескриптором .

Теперь все должно быть перетаскивается при наведении .

До сих пор у меня есть следующий код, но я не знаю, что делать:

<script>
    $("#element").dragable({handle: "#handler",  axis: "x", containment: "#container"});
</script>

Как я могу это сделать?

Answer 1

Вы не упоминаете, когда хотите перетаскивать его. Мое решение состоит в том, чтобы сделать это, когда мышь покидает контейнер, хотя это не обязательно. Вы могли бы заставить перетаскивающий элемент следовать за мышью повсюду на экране, как эти жуткие X-глаза на экране ...

http://jsfiddle.net/pabo/5xAkQ/

// set the element to be draggable
$('div#drag').draggable({
    containment: "parent"
});

// mousing over the handle starts dragging
$('div#handle').hover(function (e) {
    e.type = 'mousedown';
    $('div#drag').trigger(e);
});

// mouse leaving the container stops dragging
$('div#container').mouseleave(function (e) {
   e.type = 'mouseup';
    $('div#drag').trigger(e);
});