Posted 8 months ago. Visible to the public.

Disable built-in dragging of text and images

Most browsers have built-in drag and drop support for different page elements like text and images. While this may be useful in most situations, it may become annoying in others. If you e.g. want to allow the user to scroll/move horizontally within a container by grabbing an item and moving the mouse, you will notice that nothing will move and you'll instead start dragging that element.

To disable this, add the following CSS to your content:

-webkit-user-drag: none user-drag: none

-webkit-user-drag is only fully supported in Safari. Chrome allows you to use the none-value, but not element (which is enough in this case). The unprefixed property is not supported in any modern browser up to this point and specific support is limited to Webkit. Thus, Firefox will still allow the user to drag elements due to the lack of support.

To solve this, you will need to introduce some JavaScript. In earlier Firefox versions, adding an inline ondragstart="false"-handler was enough to bypass the functionality. This does no longer work. You may now achieve this by explicitly preventing the startdrag-event:

<div class"no-drag-pls">...</div>
const noDragElement = document.querySelector('no-drag-pls') noDragElement.addEventListener('dragstart', event => event.preventDefault())

You may want to adapt this to the event listening mechanism you use (Unpoly's up.on, jQuery's .on, ...) and wrap the element selection into a compiler function.

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Dominic Beger
Last edit:
8 months ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominic Beger to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more