html 中的元素不可拖动，即使 draggable=true

Question

我有这个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>

拖放列表元素的效果很好，而不是 h3 元素不起作用，如果我 dragStart 或 dragOver 它，chrome 显示警告符号。我该如何解决？我很确定这是一个非常基本和愚蠢的问题，但这就像我与 html 一起工作的第 3 天，所以我对它不是很有信心。感谢帮助

Answer 1

为了实现您的目标，您需要禁用元素的默认行为（无法放入）。您只需要定义一个函数来防止这种行为，使用事件的 preventDefault 属性。

你可以找到一个很好的例子here

这是更新后的脚本

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>

html 中的元素不可拖动，即使 draggable=true

Elements in html not draggable even if draggable=true

html

javascript

drag-and-drop

draggable