Hammer.js: options to prevent native link and image dragging?

Created on 8 Aug 2014  路  3Comments  路  Source: hammerjs/hammer.js

On desktop browser, when child element of Hammer instance contains link or image, mousedown + dragging will result in native drag and drop (and affect pan/swipe interaction). I am not sure this has been covered in hammer.js, or should we disable drag and drop for each images/links manually.

So far I know only one way to disable native drag and drop consistently, set attribute draggable="false" on each link and image (can't be done on container). This works fine, but I am not sure it's recommended way to do such thing, are there better alternatives?

Most helpful comment

css:

img, a{ -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Standard syntax */ user-drag: none; -webkit-user-drag: none; }

All 3 comments

Hammer doesnt handle this for you. Setting the draggable attribute is fine! Or you could let the ondrag event return false. Also, -webkit-user-drag: none in css will help, but only on webkit :-)

css:

img, a{ -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Standard syntax */ user-drag: none; -webkit-user-drag: none; }

When using electron if writing for a touchscreen device, you can simply use the following:

img, a {
    user-select: none;
    -webkit-user-drag: none;
}
Was this page helpful?
0 / 5 - 0 ratings