Question

以下代码：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
console.log(ev.dataTransfer.getData("Text"));
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>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

使用Firefox正确获取dataTransfer对象，并在执行drag1事件调用的allowDrop函数时返回图片的ID（ondragover），但在Chrome {{ 1}}返回一个空字符串。这是错误还是Chrome只返回getData事件的有效dataTransfer对象？

Answer 1

Chrome在放弃之前不会设置dataTransfer。我只是在“全局”变量中设置我的拖动参考。： - ）

Answer 2

除 drop 事件外，您无法在Chrome中使用 dataTransfer 。

您应该声明全局变量。

为你的情况试试这个：

function drag(ev)
{
   el = ev.target;
   ev.dataTransfer.setData("Text",ev.target.id);
}
function allowDrop(ev)
{
   console.log(el);
   ev.preventDefault();
}

Answer 3

实际上，这在Chrome中非常有用。我有一个简单的页面将一些div拖入一些容器。我将拖动div元素id设置为 ondragstart 方法中的 dataTransfer 。我尝试从 ondrop 回调中的 dataTransfer 中获取拖动div，然后将其复制到容器中。在本地Chrome中一切都很好用（我的意思是从资源管理器中打开它， file：// ）。但是当我将其部署到网站时，然后通过 http：// 打开它。它在chrome中不起作用。所以我使用Per Digre使用相同的解决方案。在 dragstart 上设置全局变量，清除 dragend 上的变量。希望对你有帮助！

HTML5拖放dataTransfer和Chrome

3 个答案: