Question

I know that I can make an image draggable by using $('#id').draggable();
But if the image contains some link-areas, these areas can’t be used for dragging. Is there a way to tell jQuery to differ between a click (the defined url for this area should be opend) and a drag (simply move the whole image)?

Answer 1

I found a way to achieve my goal.
The code for the image and the areas has to lay inside a div:

<div id="overlayDiv">
    <img id="overlayImage" src="/Content/images/Overlay.png" usemap="#overlayMap" />
    <map name="overlayMap" id="overlayMap">
        [some areas]
    </map>
</div>

Then you can make the div draggable:

var stopPropagation = false;
$('body').mouseup(function () { stopPropagation = false; });
$('#overlayDiv').draggable({
    stop: function () {
        stopPropagation = true;
    }
});

Because my areas don’t have urls defined but only onclick-events, I’m able to check the stopPropagation variable and decide whether to ignore the click or not.