Posted 4 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:

Copy
-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:

Copy
<div class"no-drag-pls">...</div>
Copy
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.

Flaky tests are tests that sometimes fail for no obvious reason. They are the plague of many end-to-end (E2E) test suites that automate the browser through tools like Capybara and Selenium.

Join our free training event and learn to fix any flaky test suite, even in large legacy applications.

Owner of this card:

Avatar
Dominic Beger
Last edit:
4 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