CODEWITHSUNDEEP
jquerysliderrotation
Scott Yu - builds stuff
Scott Yu - builds stuff

Reputation: 11763

jquery Draggable DIV with slider inside

Spent a few hours trying on Google and trying myself but no avail.

What I am doing is creating a DIV and making it draggable. And adding a slider inside it in order to rotate image. Creating DIV and making it draggeable and adding slider is all done on the fly. What I am doing basically is clicking on an arrow tool and it clones arrow tool inside a container and making it draggeable and adding a slider at the same time. Result would look something like this below. 

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

The problem is the slider is draggable inside the DIV. How can I make DIV draggable but still have slider to work normally?

New solution

Yes, I did figure it out and decided to do another solution using SHIFT key to do rotation. I was able to use http://www.elated.com/articles/smooth-rotatable-images-css3-jquery/ solution and now I can simply rotate images using SHIFT key while moving mouse. Much simpler than slider and works great!

Upvotes: 2

Views: 4049

Answers (1)

Yi Jiang
Yi Jiang

Reputation: 50115

Assuming you're using the jQuery UI Draggable and Slider components, this shouldn't be a problem - the two should not conflict with each other by default. However, you can still explicitly exclude the slider with the cancel option: 

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

See this jsfiddle for a simple example of this: http://www.jsfiddle.net/yijiang/KMF2v/2

Assuming you're not using jQuery UI... well, in that case I suggest you go out and get it immediately, since writing your own slider and drag-'n-drop component is seriously hard work.

Still, the obvious solution would be to stop the event from bubbling down the DOM tree using stopPropagation() 

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

Upvotes: 1

Related Questions