JQuery Draggable DIV с ползунком внутри

Question

Провел несколько часов, пытаясь на Google и пытаясь сам, но безрезультатно.

То, что я делаю, - это создание DIV и его перетаскивание. И добавив слайдер внутри него, чтобы повернуть изображение. Создание DIV, его перетаскивание и добавление слайдера - все это делается на лету. В основном я делаю щелчок на инструменте со стрелкой, и он клонирует инструмент со стрелкой в ​​контейнере, делает его перетаскиваемым и одновременно добавляет ползунок. Результат будет выглядеть примерно так ниже.

<div class='draggable'>
  <img src='example.gif'>
  <div class='slider'></div>
</div>

Проблема в том, что ползунок перетаскивается внутри DIV. Как сделать DIV перетаскиваемым, но при этом иметь ползунок для нормальной работы?

Новое решение

Да, я понял это и решил сделать другое решение, используя клавишу SHIFT, чтобы сделать вращение. Мне удалось использовать решение http://www.elated.com/articles/smooth-rotatable-images-css3-jquery/, и теперь я могу просто поворачивать изображения с помощью клавиши SHIFT при движении мыши. Гораздо проще, чем слайдер и прекрасно работает!

Answer 1

Если вы используете компоненты jQuery UI Draggable и Slider, это не должно быть проблемой - по умолчанию они не должны конфликтовать друг с другом. Однако вы все равно можете явно исключить ползунок с параметром cancel:

$('.draggable').draggable({
    cancel: '.slider'
});

См. Этот jsfiddle для простого примера этого: http://www.jsfiddle.net/yijiang/KMF2v/2

---

Предполагая, что вы не используете jQuery UI ... хорошо, в этом случае я предлагаю вам выйти и получить его немедленно, так как написание собственного слайдера и компонента drag-'n-drop серьезно тяжелая работа.

Тем не менее, очевидным решением было бы остановить всплытие события вниз по дереву DOM, используя stopPropagation()

$('.slider').click(function(event){
    event.stopPropagation();
});