Elements in html not draggable even if draggable=true

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

Solution

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>