Css /JS to prevent dragging of ghost image?

html

responsive-design

best-practices

web-development

byAnton Shumikhin·Sep 24, 2024

To prevent image dragging, assign draggable="false" to the <img> element and apply user-select: none; CSS rule to avoid incidental selection. Use JavaScript to handle the dragstart events and block them.

<img src="image.png" draggable="false" style="user-select: none;">

document.addEventListener('dragstart', event => {
  event.preventDefault(); // "I said no dragging!"
});

A comprehensive approach to anti-dragging

Let's break this down further for superior understanding and precise control over drag behaviors.

Defusing the drag bomb entirely

You might want to lock down dragging for all elements like in a high-security area:

/* FBI, No Dragging Zone */
* {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

This is essentially like sending a "Stay where you are!" command to every element. However, it's easier to manage if you assign these properties to specific classes rather than globally.

Taming the wild Webkit

Webkit-based browsers sometimes need a gentle nudge with the -webkit-user-drag property:

/* Webkit, meet Manners */
.no-drag {
  -webkit-user-drag: none;
  user-select: none;
}

A little JavaScript, like a scolding aunt, would ensure doubly that they conform:

element.setAttribute('draggable', false);
element.ondragstart = function() { return false; }; // "Sit down, young one!"

Keeping the balance on the tightrope of functionality

Using pointer-events: none; might seem tempting, think of it like a switch that turns off all interaction including clicks and hovers too, so be precise:

/* the Force: Use it wisely, Luke */
.no-pointer-events {
  pointer-events: none; // Apply only where necessary!
}

In JavaScript, don't make things quiet. We still want our app to talk back:

element.ondragstart = event => event.preventDefault(); // "No dragging, but I'm still listening!"

Dancing the mobile-touch tango

Touch devices groover to a different beat 🕺 and don't respond to draggable=false. They require extra shimmy in the CSS:

/* Tango uniform, this is Bravo Tango */
.no-drag {
  touch-action: none;
}

This gets all the partners moving in sync, regardless of their platform. With touch-action, you guide the dance.

The intricacies of interactivity

While disabling dragging with JavaScript, remember to dance with the click events too:

element.addEventListener('mousedown', event => {
  if (event.target.classList.contains('no-drag')) {
    event.preventDefault(); // "No dragging, but clicks are still invited to the party! 🎊"
  }
});

Sensible JavaScript house rules ensure that all guests have a great time.

A masterclass in cross-browser compatibility

Every browser is a guest at this party. Keep everyone happy with some extra servings of browser-specific rules:

/* Dress code for browser-party guests */
.no-drag {
  user-select: none;
  -moz-user-select: none; /* Firefox */
  -webkit-user-drag: none; /* Webkit */
  -ms-user-select: none; /* "Remember when IE was cool?" */
}

Beatmatch these CSS tunes with a JavaScript DJ that keeps up with browser compatibility:

/* Old School Beats */
var isIE = /Trident/.test(navigator.userAgent);

/* A special track for the IE headbangers */
if (isIE) {
  element.setAttribute('unselectable', 'on'); // IE-specific attribute
}