2

私はhtml5でこのスニペットを見つけました:

<script>
    function drag(target, evt) {
        evt.dataTransfer.setData("Text", target.id);
    }
    function drop(target, evt) {
        var id = evt.dataTransfer.getData("Text");
        target.appendChild(document.getElementById(id));
        evt.preventDefault();
    }
</script>

<img src="../#"  id="block1" ondragstart="drag(this, event)" alt="block1">
<img src="../#"  id="block2" ondragstart="drag(this, event)" alt="block2"><br/>

<div class="box" ondragover="return false" ondrop="drop(this, event)">
    <p>Box 1</p>
</div>
<div class="box" ondragover="return false" ondrop="drop(this, event)">
    <p>Bax 2</p>
</div>
<div style="clear:both"></div>

ボックス 1、ボックス 2 などにあるブロックをどのように受け取ることができますか? 両方のボックスを区別することはできません。

4

1 に答える 1

1

まず、ボックスに固有のid属性を与えます。次に、targetパラメーターをdrop()関数に使用できます。

<div class="box" ondragover="return false" ondrop="drop(this, event)" id="box1">
    <p>Box 1</p>
</div>
<div class="box" ondragover="return false" ondrop="drop(this, event)" id="box2">
    <p>Box 2</p>
</div>

次に、値target.idを使用して 2 つの div を区別できます。

また、関数のtargetパラメーターを使用して、ブロックに属性が割り当てられていると仮定して、ドラッグされているブロックの属性を取得できます。drag()idid

これは動作中のjsFiddleです。

HTML5 のドラッグ アンド ドロップに関する多くの情報がここにあります。

http://www.w3.org/TR/html5/dnd.html#dnd

于 2012-07-27T13:18:51.080 に答える