0

オンラインのドラッグ＆ドロップのチュートリアルに従い、自分で少しテストしました。次に、問題に気付きました。image1 を Box A に、image2 を Box B にドラッグした後、image1 を Box A から Box B にドラッグしようとすると、問題が発生します。ボックス B の端にイメージ 1 をドロップすると、すべて正常に動作し、両方のイメージがボックス B にあり、イメージ 1 をイメージ 2 の上にドロップすると、イメージ 1 が消えます。誰もこれを防ぐ方法を知っていますか? どのようにドロップしても、両方の画像がボックスに表示されるボックスが必要です。

私のリンク例: http://qcn.freeiz.com/VisTool/DnDrp%20Test.htm

ありがとう！

4

1 に答える 1

2

イベントのバブリングについて学び、リスナーをアタッチした要素ではなく、ev.target最初にイベントが発生した要素であることを理解してください。行う前にdrop何を確認してください。 簡単な例を次に示します。ev.targetappendChildev.preventDefault()

function dragDrop(ev) {
    var eleid = ev.dataTransfer.getData("Text");
    var el = ev.target;
    if (el.id != 'dropzone' && el.id != 'dropzone2') {
        el = el.parentNode;
    }
    el.appendChild(document.getElementById(eleid));
    ev.preventDefault();
}
于 2013-02-13T15:47:55.000 に答える