10

次のコード：

<!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、画像のID（drag1）が返されますが、Chromeでは空の文字列が返されます。それはバグですか、それともChromeはイベントでのみ有効なオブジェクトを返しますか？allowDropondragovergetDatadataTransferondrop

4

3 に答える 3

6

Chrome はドロップ前に dataTransfer を設定しません。代わりに、ドラッグ参照を「グローバル」変数に設定しました。:-)

于 2015-06-18T16:22:20.250 に答える
4

dropイベント以外では、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://を開くだけです)。しかし、それをWebサイトにデプロイしてから、http://経由で開くと. クロムでは機能しません。したがって、Per Digre でも同じソリューションを使用します。dragstartでグローバル変数を設定し、dragendで変数を消去します。それがあなたを助けることを願っています!

于 2016-03-07T02:54:47.663 に答える