Javascript Drag and Drop event – error catching
Last Updated :
26 Dec, 2022
Javascript Drag and Drop event allows users to drag and drop elements within a web page. The event is initiated when the user clicks on an element and drags it to a new location.
There are several other types of errors that can occur when working with the drag-and-drop event in Javascript. Here are a few examples:
- “Cannot read property ‘setData’ of undefined” error: This error occurs when the dataTransfer property of the dragstart event is not available. This can be fixed by making sure that the dragstart event is being triggered correctly.
- “Cannot read property ‘preventDefault’ of undefined” error: This error occurs when the dragover event is not being triggered correctly. This can be fixed by making sure that the dragover event listener is correctly attached to the element.
- “Cannot read property ‘getData’ of undefined” error: This error occurs when the dataTransfer property of the drop event is not available. This can be fixed by making sure that the drop event is being triggered correctly.
- “Cannot read property ‘appendChild’ of null” error: This error occurs when the element being dropped onto does not exist in the DOM. This can be fixed by making sure that the element being dropped onto exists in the DOM.
Another error that can occur during the drag and drop event is the “Cannot read property ‘addEventListener’ of null” error. This error occurs when the script is trying to access an element that does not exist in the DOM (Document Object Model).
Example: Here is an example of code that may throw this error:
Javascript
let draggableElement = document.querySelector('#draggable');
let dropzoneElement = document.querySelector('#dropzone');
draggableElement.addEventListener('dragstart', function (event) {
event.dataTransfer.setData('text/plain', event.target.id);
});
dropzoneElement.addEventListener('dragover', function (event) {
event.preventDefault();
});
dropzoneElement.addEventListener('drop', function (event) {
event.preventDefault();
let data = event.dataTransfer.getData('text/plain');
event.target.appendChild(document.getElementById(data));
});
|
Output:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
To fix this error, there are a few approaches we can take:
- Make sure that the element with the specified ID actually exists in the DOM
- Use the querySelector() method instead of getElementById() to select the element
- Use the try-catch statement to handle the error
Example 1: Here is an example using the querySelector() method to fix the error:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
#draggable {
width: 100px;
height: 100px;
}
#dropzone {
width: 200px;
height: 200px;
border: 1px solid green;
border-radius: 10px;
}
</style>
</head>
<body>
<div>
<h2>Drag the icon!</h2>
<img id="draggable" src=
alt="GFG_logo">
</div>
<br />
<h2>Drop here!</h2>
<div id="dropzone"></div>
<script>
let draggableElement = document
.querySelector('#draggable');
let dropzoneElement = document
.querySelector('#dropzone');
draggableElement
.addEventListener('dragstart', function (event) {
event.dataTransfer
.setData('text/plain', event.target.id);
});
dropzoneElement
.addEventListener('dragover', function (event) {
event.preventDefault();
});
dropzoneElement
.addEventListener('drop', function (event) {
event.preventDefault();
let data = event.dataTransfer.getData('text/plain');
event.target.appendChild(document.getElementById(data));
});
</script>
</body>
</html>
|
Output:
Example 2: And here is an example using the try-catch statement to handle the “Cannot read property ‘addEventListener’ of null” error:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
#draggable {
width: 100px;
height: 100px;
}
#dropzone {
width: 200px;
height: 200px;
border: 1px solid green;
border-radius: 10px;
}
</style>
</head>
<body>
<div>
<h2>Drag the icon!</h2>
<img id="draggable" src=
alt="GFG_logo">
</div>
<br />
<h2>Drop here!</h2>
<div id="dropzone"></div>
<br />
<h2>Using try-catch method</h2>
<script>
try {
let draggableElement = document.getElementById('draggable');
let dropzoneElement = document.getElementById('dropzone');
draggableElement
.addEventListener('dragstart', function (event) {
event.dataTransfer
.setData('text/plain', event.target.id);
});
dropzoneElement
.addEventListener('dragover', function (event) {
event.preventDefault();
});
dropzoneElement
.addEventListener('drop', function (event) {
event.preventDefault();
let data = event.dataTransfer
.getData('text/plain');
event.target
.appendChild(document.getElementById(data));
});
} catch (error) {
console.log(error);
}
</script>
</body>
</html>
|
Output:
In conclusion, implementing drag-and-drop events in Javascript can be a powerful way to create interactive and user-friendly web applications. However, it is important to carefully consider the various approaches to implementing drag-and-drop functionality, as well as the potential challenges and pitfalls that can arise.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...