HTML5 拖放数据传输和 Chrome答案

【问题标题】：HTML5 Drag and Drop dataTransfer and ChromeHTML5 拖放数据传输和 Chrome
【发布时间】：2012-10-18 15:24:06
【问题描述】：

以下代码：

<!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 中，当 ondragover 事件调用的 allowDrop 函数被执行时，可以正确获取 dataTransfer 对象并返回图像的 id (drag1)，但在 Chrome 中，getData 返回一个空字符串。是错误还是 Chrome 仅通过 ondrop 事件返回有效的 dataTransfer 对象？

【问题讨论】：

HTML5 DnD dataTransfer setData or getData not working in every browser except Firefox 的可能重复项
出于安全原因，Chrome 不允许以这种方式传输数据。我有同样的问题，我使用不同的程序来做到这一点。

标签： html drag-and-drop

【解决方案1】：

Chrome 没有在 drop 之前设置 dataTransfer。我只是将拖动引用设置在“全局”变量中。 :-)

【讨论】：

【解决方案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();
}

【讨论】：

【解决方案3】：

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

【讨论】：

好奇怪。我也看到了这一点。在本地，Chrome 的工作方式与具有拖放功能的 Firefox 一样，但是一旦我在ondragenter 等期间从从 dataTransfer 读取的 Web 服务器尝试它就停止工作。令人沮丧！