Get my latest tutorials

by Sai gowtham

JavaScript - Disable the drag and drop on html element

In this tutorial, we are going to learn about how to disable drag and drop on an html element using JavaScript.

Consider, that we have the following div element in our HTML:

<div id="container">
  <h1>Placeholder image</h1>
  <img src="https://via.placeholder.com/150" />
</div>

To disable the drag and drop on an element, first we need to access that element inside the JavaScript using the document.getElementById() method, then add the dragstart and drop events to the element and call the event.preventDefault() method inside it

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

Here is an example:

<div id="container">
  <h1>Placehodler image</h1>
  <img src="https://via.placeholder.com/150" />
</div>
const divEl = document.getElementById("container");

divEl.addEventListener("dragstart",(event)=>{
  event.preventDefault();
})

div.addEventListener('drop', (event) => {
  e.preventDefault();
})

In the example above, we have added the dragstart and drop events to the div element and called the event.preventDefault() method inside it, so it prevents the user from dragging and dropping.

The HTML dragstart event is fired when a user tries to drag an element inside the webpage.

The HTML drop event is fired when a user tries to drop an element inside the webpage.

Similarly, we can also disable the drag and drop on an element by calling the event.preventDefault() method inside a mousedown event handler function.

Here is an example:

<div id="container">
  <h1>Placehodler image</h1>
  <img src="https://via.placeholder.com/150" />
</div>
const divEl = document.getElementById("container");

divEl.addEventListener("mousedown",(event)=>{
  event.preventDefault();
})

The mousedown event is fired at an element when a user presses the mouse button.

Disable Drag and Drop using CSS

We can also disable drag and drop on the html elements 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.

Here is an example:

<div id="container">
  <h1>Placehodler image</h1>
  <img src="https://via.placeholder.com/150" />
</div>
#container{
    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