2

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!

Improve this question
1

1 Answer 1

Reset to default
1

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(); });
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hi Yi, thanks. I went to the link you sent (jsfiddle) but the slider is not working inside the DIV. I am on Linux Firefox 3.6. Thanks!
Works fine in Chrome. But not Firefox for some reason.
@Scott Doh! I know why the demo didn't work for you on Firefox. I had left an console.log in there which I forgot to take out. I'm so sorry... it should work now.
It would be cool to allow user to rotate while pressing SHIFT key instead of slider bar. I'll see if I can do it and if I do, I'll share code.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.