Preventing an Image from Being Draggable or Selectable Without Using Js

Preventing an image from being draggable or selectable without using JS

Set the following CSS properties to the image:

.selector {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

Is it possible to prevent an image from being selected on a web page?

Use a div element and use the background-image property to set the background image to be the question mark for the div element.

The div element contains no text whatsoever, thus cannot be selected.

Just for clarification:

<thead>
  <tr>
    <th>header1</th>
    <th>header2 <div class="question-mark"></div></th>
  </tr>
</thead>

.question-mark{
    height: 100%;
    width: 10px;
    background-image: url("question_mark.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

How to make IMG logo not draggable

Set the CSS property of the image as:-

user-drag: none; -moz-user-select: none; -webkit-user-drag: none;

Disable dragging of image in entire project HTML pages

You could add ondragstart attribute to single image & return false.

If you want to address multiple images

const imgs = document.getElementsByTagName('img');
for(let i = 0; i < imgs.length; i++ ) {
    imgs[i].setAttribute("ondragstart", "return false")
}

Note from React Synthetic events

As of v0.14, returning false from an event handler will no longer stop event propagation. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate.

So you need add to each image.

<img src={source} onDragStart={e => e.preventDefault()} />

Disable dragging an image from an HTML page

I tried myself and found this is working.

$("img").mousedown(function(){
    return false;
});

I am sure this disables dragging of all the images. Not sure it effects something else.

Disable dragging in HTML webpage

You can use e.preventDefault() to prevent the default effect from happening inside your onmousedown event.

Add e.preventDefault() inside your enableToggle(e) function

function enableToggle(e) {
  isToggling = true;
  e.preventDefault()
}

If that doesn't work add it to toggle() and disableToggle()

Make image not-draggable but still clickable/hoverable

Just add the draggable attribute in your img tag

Here's an example:

<img
  draggable="false"
  src="#"
/>

Preventing images and text to be selected

Add this to your style sheet

.selectDisable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.selectEnable { 
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

Just add the class selectDisable to the element you want to prevent from being selected.

The drag effect occurs on webkit(chrome, safari, opera). It does not happen on Firefox.

Don't this apply to your whole document if you have textual content because then you won't be able to select text, which is not very user-friendly.

You could also prevent dragging by adding another empty div on top of your image with the same selectDisable class.

Here is a working example:

http://jsfiddle.net/xugy6shd/3/

---

Related Topics