I have a div-pop-up when you click certain text. I want it to be movable so I used the jQuery UI draggable() feature and works like a charm. However, the issue I am having is with a div within this pop up. I am displaying information from an array that can range from 0 to nearly infinity if needed. Therefore I am using overflow:auto to make it into a scroll box. Everything appears as it should however, when I click the up and down arrows to scroll up and down within that box it instead begins the draggable feature. It is rather annoying and understand why the problem is happening. I am looking for advice to fix it or get around it somehow.
Here is a jsfiddle to display the issue: http://jsfiddle.net/BnTPG/
You can use the handle option. Take a look (I modified your fiddle). In my example, I set the title as the handle of the draggable and I used some ids instead of the classes as you did.
http://jsfiddle.net/BnTPG/2/
I think you are having this problem because you are using relative and absolute positioning (it’s just a guess, I didn’t tested this).