如何用HTML5拖放API为被拖动的项目设置样式
我们正在为一个项目使用HTML5拖放API。
https://developer.mozilla.org/en-us/docs/web/api/html_drag_and_drop_api
一切正常工作，现在我们需要能够有不同的样式为原始项目源和为项目被拖动。
我们遇到的问题是被拖动的项目总是半透明的。
我们不允许共享代码，但这是我们用作基础的示例
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>
我们需要的是
- 将原始项源背景更改为灰色
- 将正在拖动的项目的背景更改为蓝色，而不是半透明。
谢谢你的帮助。
共有1个答案
这个概念在这个页面上得到了很好的解释--https://www.kryogenix.org/code/browser/custom-drag-image.html
其想法是将您想要显示为拖动图像的样式图像插入主体中，并使用css将其移出视图，并将该组件设置为“拖动图像”。
提示：在不同的浏览器中，行为是不同的，您可能需要测试它是否可以按照您的要求在其他浏览器中工作。
-
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Tex
-
我正在使用本机拖放html5 api开发拖放界面。我们已经在其他部分使用了jQuery拖动，但是它在这个特定部分的表现很差，所以我们使用原始的JavaScript。 本质上，标记看起来像这样... 我为“dragstart”创建一个addEventListener并运行以下函数 它将我的类完美地应用于原始元素，但我似乎不能移动原始元素。浏览器创建克隆/幽灵图像...我看到你可以创建自己的图像显示，
-
pre { white-space: pre-wrap; } 本教程向您展示如何使 HTML 元素可拖动，在本例中，我们将创建三个 DIV 元素然后启用他们的拖动和放置。 首先，我们创建三个 <div> 元素： <div id="dd1"></div> <div id="dd2"></div> <div id="dd3"></div> 对于第一个 <div> 元素，我们
-
问题内容： 我正在使用TransferHandler将数据从JPanel作为JLabel传递到JTextArea （单击左侧面板中的某处以创建要拖动的JLabel） 数据的传输工作正常，但是我还想“显示” JLabel，因为 它与鼠标指针一起被拖动。 如果您注释掉 您将看到我想要它的外观。（但当然不会传输数据）。 如何既可以进行传输又可以使JLabel跟随鼠标光标？ 这是代码： 问题答案： 另一个
-
我有一个非常奇怪的问题，当我把一个项目从计划外的游戏桶拖到一个网格中时，你可以看到可拖动的项目被切断，大约80%的时间都是在这个区域上拖动的。 当计划外游戏中的项目溢出时，滚动条会出现这种情况。否则，拖动时不会切断。在网格中的游戏之间也可以找到拖放工作。 这只发生在Chrome中。Firefox和Edge运行良好。我真的不知道要显示什么JS或CSS，因为它可以是任何东西。 另外，当我像下面的屏幕一
-
问题内容： 对于我正在开发的应用程序，我有一个带有（我自己的类型）TreeItems的TreeView。一切正常，我可以按预期显示项目。 现在，我希望能够处理将一个项目从此TreeView拖到应用程序窗口的另一部分，并使其在此执行某些操作。我现在面临两个（至少……）问题： 每当您在TreeView中单击时，该项目始终处于选中状态。可以预防吗？ 在TreeView上添加MouseEvent侦听器时，