10

The following code:

<!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>

with Firefox get correctly the dataTransfer object and returns the image's id (drag1) when the allowDrop function called by ondragover event is executed, but in Chrome getData returns an empty string. Is it a bug or Chrome returns a valid dataTransfer object only with the ondrop event?

4

3 回答 3

6

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

于 2015-06-18T16:22:20.250 回答
4

除了drop event之外，您不能在 chrome 中使用dataTransfer 。

您应该改为声明一个全局变量。

对于你的情况试试这个：

function drag(ev)
{
   el = ev.target;
   ev.dataTransfer.setData("Text",ev.target.id);
}
function allowDrop(ev)
{
   console.log(el);
   ev.preventDefault();
}
于 2016-08-07T15:28:57.587 回答
1

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

于 2016-03-07T02:54:47.663 回答