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

ax6ht2ek 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(472)

我有这个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一样，所以我对它不是很有信心。谢谢你的帮助

JavaScript Html drag-and-drop draggable

来源：https://stackoverflow.com/questions/68335321/elements-in-html-not-draggable-even-if-draggable-true

1条答案

按热度按时间

x759pob21#

为了实现您的目标，您需要禁用元素的默认行为（不能删除）。您只需要使用事件的preventdefault属性定义一个防止这种行为的函数。
你可以在这里找到一个很好的例子
这是更新后的脚本

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>

赞(0）回复(0）举报 2021-09-13

我来回答

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

1条答案

相关问题

热门标签

最新问答