如何解决如何使用 HTML 5 Drag And Drop API 设置被拖动项目的样式
我们正在为一个项目使用 HTML 5 Drag and Drop 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>
我们需要的是
- 将原始项目源背景更改为灰色
- 将被拖动的项目背景更改为蓝色,而不是半透明。
感谢您的帮助。
解决方法
这个概念在这个页面上有很好的解释-https://www.kryogenix.org/code/browser/custom-drag-image.html
这个想法是在正文中插入要显示为拖动图像的样式图像,然后使用 css 将其移出视图并将该组件设置为“拖动图像”。
提示:行为在不同的浏览器中有所不同,您可能想测试它是否也能像您希望的那样在其他浏览器中正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。