Disable anchor link click + drag in HTML page / Swipe a container with links inside

Question

I'd like to disable the click + drag on a link

When you press your left click of the mouse on a link in a web page, and your drag this one, you can move the link and, by example open a new tab with. I'd like to disable this on my page, javascript or css.

On the website 500px, they disabled it:

http://500px.com/photo/31922503

By example on this photo, you can click the link (the photo), but it's not possible to drag the link. It's also good to avoid the drag and drop of pictures.

So if I disable the link, I need to not disable the container.

I disable the link stopping dragstart on them (Thanks to "KevinIsNowOnline"):

$('div#multislides').on('dragstart', 'a', function () {
    return false;
});

But, I need to drag/swipe the container! So I'm looking for a solution to do that.

Without links, works: http://jsfiddle.net/Ff3Ts/

With links, doesn't work: http://jsfiddle.net/Mfmfz/

On examples, you are able to drag/swipe the container when there is no link, but it's not working with links.

Any idea?

Thanks.

Answer 1

Hi I have checked the site you posted an was able to observe what you want to achieve.

Please see code below:

document.getElementById('notClickable').ondragstart = function() { return false; };
//upon start of drag of the selected image, it immediately returns false, or cancels the event.

Check out this jsFiddle Link for more information.