CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-draggable
Christopher
Christopher

Reputation: 2057

Draggable image with link-areas

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)?

Upvotes: 0

Views: 357

Answers (3)

Christopher
Christopher

Reputation: 2057

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.

Upvotes: 1

Mandeep Jain
Mandeep Jain

Reputation: 2664

I think this is not possible, and also wouldnt be prefereable from a UI point of you. You have no way to tell that a user has clicked on the link to 'open it' OR 'drag it'.

So trying to change the default behaviour of the click event on the link my confuse the user which is not good for User Experience.

Upvotes: 0

Tyron
Tyron

Reputation: 1976

There seems to be an option where you can prevent elements inside #id to be draggable: http://api.jqueryui.com/draggable/#option-cancel

Apply this to your link elements and they will be clickable.

$("#id" ).draggable({ cancel: "a" });

Upvotes: 0

Related Questions