2

サムネイルから画像をドラッグしてキャンバスにドロップして描画することを実装しています。

イベント ondragstart で datatransfer.setdata() を使用し、イベント ondrop で datatransfer.getdata() を使用しました。Firefox では問題なく動作しますが、Chrome では動作しません。Chrome ではデータ転送がサポートされていないことがわかりました。それで、クロスブラウザ互換性もあるはずの良い解決策は何ですか？

function dragIt(event) {
event.dataTransfer.setData("URL", event.target.id)
};

function dropIt(event) {
  var theData = new Image();
  theData = event.dataTransfer.getData("URL");
  dt = document.getElementById(theData);
  event.preventDefault();
  var ctx = this.getContext('2d');
  ctx.clearRect(0,0,this.width,this.height);
  ctx.drawImage(dt, 0, 0);      
};

var out = document.getElementById('out');
        var Can1 = document.createElement("canvas");
        Can1.height="100";
        Can1.width="100";
        Can1.style.cssText = 'position:relative; top:5px;left:500px;border:2px  solid black;'  
        Can1.ondragover = function(event) {
        event.preventDefault();
        };
        Can1.ondrop = dropIt;  
        out.appendChild(Can1);
4

1 に答える 1

1

私はことわざの馬がおそらくこの質問にボルトで固定されていることを知っていますが、getData/setData を使用して Chrome でこの問題に気付きました。私にとっては、データの形式として「text」または「text/plain」を使用する場合にのみevent.dataTransfer.getData(format)機能し、それ以外はすべて を返すことで失敗しundefinedます。

Chrome の開発者ツールでは、event.dataTransfer.typesプロパティを調べて、getData/setData 関数の「format」パラメーターで受け入れられる値を確認できます。

したがって、この場合は「URL」を「テキスト」に変更すると問題が解決する場合があります。残念ながら、なぜ Chrome がこれらのフォーマットのみを実装することを選択したのかについての情報を見つけることができませんでした。

于 2014-02-24T18:12:03.367 に答える