2

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

Improve this question
2
  • Well, I tried your code, and to me the h3 is draggable (I can see that hover effect that browser does on draggable elements). Maybe that's not the problem?
    – Trillyy
    Commented Jul 11, 2021 at 10:32
  • @Trillyy It does the effect but, for example, if I drag an element of the list and drop it into h3, the method "drop0" is not called. I don't know if it's only a problem of the ondrop function but when i drag an element of the list I have a different symbol on the dragged items than when I do with h3. Now I'm trying to add screenshot to the question to make it more detailed
    – Lorenzo Cutrupi
    Commented Jul 11, 2021 at 12:16

1 Answer 1

Reset to default
1

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>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.