1

動的に作成されたイメージに ondragstart ハンドラを追加しようとしています:

var image = new Image();
    image.src = "https://www.filepicker.io/api/file/JhJKMtnRDW9uLYcnkRKW";
    image.onload = function(event){
        this.ondragstart = drag(event);
        divImage.appendChild(this);
    };
function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }

ただし、次のエラーが表示されます: Uncaught TypeError: Cannot call method 'setData' of undefined

dom 経由でロードした静的イメージでこれを試してみましたが、正常に動作しますが、動的に生成されたイメージが動作しないのはなぜですか? 何らかの理由で、ドラッグ機能で、動的に作成された画像の場合、ev に dataTransfer オブジェクトが含まれていませんか? 誰かが理由を知っていますか？

これは私がやろうとしていることです: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop ただし、javascript を介して画像を動的に作成し、ondragstart ハンドラーを追加できるようにしたいそれ。

ありがとう、

4

1 に答える 1

5

動的に生成された要素はページ読み込み時に DOM に属さないため、次addEventListenerのように、要素の新しいインスタンスごとに変更する必要があります。

this.addEventListener('dragstart', function() {drag(ev)}, false);

ここで、それが機能することを示すフィドルを作成しました（コードにいくつかの変更といくつかの仮定を加えて）。

img は最初に青い 'body' div に読み込まれます。ボタンを数回すばやくクリックすると、これが表示されます。

この Stackoverflow の投稿は、あなたの投稿と強く関連しています: Javascript ondrag、ondragstart、ondragend

編集:投稿に記載されているように、イベントをドラッグするためのクロスブラウザー ソリューションが必要な場合は、js フレームワークを使用することをお勧めします。

于 2013-04-30T10:03:32.813 に答える