how to avoid jQuery UI draggable from also triggering click event

Question

A have a large div (a map) that is draggable via jQuery UI draggable. The div has child divs which are clickable.

My problem is that if you drag the map, on mouse up, the click event is fired on whatever child div you started the drag from.

How do I stop the mouse up from triggering the click event if its part of a drag (as opposed to someone just clicking without a drag, in which case the click event is desired).

Answer 1

Could you perhaps set a variable such as "justDragged = true" when starting the drag and then on the mouseUp event check this variable and if true, set it to false and then do a event.preventDefault + return w/o doing anything. This way it skips the first click after the drag. Seems kind of hackish, perhaps others will have a more elegant solution.