如何使用 HTML 为正在拖动的项目设置样式 5 拖放 API

Question

我们正在为一个项目使用 HTML 5 拖放 API。

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

一切正常，现在我们需要能够为原始项目源和被拖动的项目提供不同的 styles。

我们遇到的问题是被拖动的项目总是半透明的。

我们不允许共享代码，但这是我们用作基础的示例

https://www.w3schools.com/html/html5_draganddrop.asp

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

我们需要的是

将原始项目源背景更改为灰色
将被拖动的项目背景更改为蓝色，并且不是半透明的。

谢谢您的帮助。

Answer 1

这个概念已经在这个页面上得到了很好的解释 - https://www.kryogenix.org/code/browser/custom-drag-image.html

这个想法是在正文中插入要显示为拖动图像的样式图像，并使用 css 将其移出视图并将该组件设置为“拖动图像”。

提示：在不同的浏览器中，行为是不同的，您可能想测试它是否也可以在其他浏览器中按您的要求工作。

如何使用 HTML 为正在拖动的项目设置样式 5 拖放 API

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-04-13 14:06:29

如何使用 HTML 为正在拖动的项目设置样式 5 拖放 API

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-04-13 14:06:29

解决方案1
1 已采纳 2021-04-13 14:06:29