Home » CSS » How to Disable Drag Image Using CSS?

How to Disable Drag Image Using CSS?

By

You can use the user-drag: none and user-select: none CSS properties to disable the dragging and selecting of images on your website. These properties can be applied to the img element or any containing element, like the div that wraps the image.

Here is an example of how you can use these properties to disable the dragging and selecting of images on your website:

img {
  user-drag: none;
  user-select: none;
}

Alternatively, you can use the pointer-events: none property to disable the dragging of images. This property can be applied to the img element or any containing element, and it will prevent the element from responding to pointer events (such as clicks, hover, and dragging). Here is an example of how you can use this property to disable the dragging of images on your website:

img {
  pointer-events: none;
}

It's important to note that these CSS properties will only work in modern browsers that support them. If you need to support older browsers, you may need to use JavaScript to disable the dragging and selecting of images.

Related: