即使draggable = true，html中的元素也不能拖动答案

【问题标题】：Elements in html not draggable even if draggable=true即使draggable = true，html中的元素也不能拖动
【发布时间】：2023-03-28 10:57:01
【问题描述】：

我有这个 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 的第三天，所以我对它不是很有信心。感谢您的帮助

【问题讨论】：

好吧，我试过你的代码，对我来说 h3 是可拖动的（我可以看到浏览器对可拖动元素的悬停效果）。也许这不是问题？
@Trillyy 它会产生效果，但是，例如，如果我将列表中的一个元素拖放到 h3 中，则不会调用方法“drop0”。我不知道这是否只是 ondrop 函数的问题，但是当我拖动列表的一个元素时，拖动的项目上的符号与使用 h3 时不同。现在我正在尝试将屏幕截图添加到问题中以使其更详细

标签： javascript html drag-and-drop draggable

【解决方案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>

【讨论】：