Menu
I have this html:
<h3 id="mainCategories" ondrop="drop0" draggable="true">Main categories</h3>
<ul id="list">
<li id="0" draggable="true">...</li>
<li id="1" draggable="true">...</li>
<li id="2" draggable="true">...</li>
</ul>
Drag & drop with elements of the list works perfectly, instead with h3 element is not working and if I dragStart or dragOver it, chrome shows a symbol of warning. How can I fix it? I'm pretty sure it is a very basic and stupid problem, but this is like my 3rd day working with html so I'm not very confident with it. Thanks for the help
252
asked Dec 06 '25 20:12
In order to achieve your goal, you need to disable the default behaviour of the elements (which can't be dropped in). You only need to define a function that prevent this behaviour, using the preventDefault property of the event.
You can find a good example here
Here's the updated script
function drop() {
console.log("drop called")
}
function allowDrop(event) {
event.preventDefault();
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js"></script>
<title>Document</title>
</head>
<body>
<h3 id="mainCategories" ondrop="drop()" ondragover="allowDrop(event)" draggable="true">Main categories</h3>
<ul id="list">
<li id="0" draggable="true">...</li>
<li id="1" draggable="true">...</li>
<li id="2" draggable="true">...</li>
</ul>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With