by Sai gowtham

Disable the drag and drop image in React

In this tutorial, we are going to learn about how to disable the drag and drop image in React with the help of the examples.

Consider, that we have the image in our React app:

import  React from "react";

function App {
    return (
      <div>
          <img src="https://via.placeholder.com/150" />
      </div>
    );
}

export default App;

To disable the drag and drop image in React, add the onDragStart event to the image element and call the event.preventDefault() method inside it.

The event.preventDefault() method prevents the browser from default actions, so it disables the image from drag and drop.

Here is an example:

import  React from "react";

function App {
    return (
      <div>
          <img src="https://via.placeholder.com/150"
           onDragStart={(event)=> event.preventDefault()}
          />
      </div>
    );
}

export default App;

Similarly, we can disable the drag and drop image by setting an HTML draggable attribute to false.

Here is an example:

import  React from "react";

function App {
    return (
      <div>
          <img src="https://via.placeholder.com/150"
           draggable="false"
          />
      </div>
    );
}

export default App;

The draggable attribute can accept the following values:

  • true: the element can be dragged.

  • false: the element cannot be dragged.

Disable Drag and Drop image using CSS

We can also disable the drag and drop image by setting the css pointer-events property to none.

When we set a pointer-events property to a value "none", the element doesn’t respond to any cursor or touch events.

import  React from "react";

function App {
    return (
      <div>
          <img src="https://via.placeholder.com/150" />
      </div>
    );
}

export default App;
img{
    pointer-events: none;
}

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY