JavaScript - how to ignore minor dragging events?

Question

Hi,

I have a draggable image within a div. I can click on the image to bring up a pop-up menu, which works fine. Quite often when I click on the image I drag it by about 1-5 pixels, therefore on click event doesn't get fired up, instead, a dragstart event gets fired up, so the pop-up menu doesn't appear on the screen.

Is there a way to stop minor dragging events from firing up? I.e. any drag event below 5 pixels in either X or Y axis will be ignored, and everything above 5 pixels in either X or Y axis will fire up a dragging event.

Thank you

Answer 1

If you are using jQueryUI, take a look at the following demo: http://jqueryui.com/demos/draggable/#delay-start