在Html5状态下被丢弃

我在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>

功能拖动（目标，evt）{
evt.dataTransfer.setData（“Text”，target.id）；
}
功能下降（目标，evt）{
var id=evt.dataTransfer.getData（“文本”）；
target.appendChild（document.getElementById（id））；
evt.preventDefault（）；
}


方框1

Bax 2

---

如何接收框1、框2等中的块。我们无法区分这两个框，否？

首先，为框指定唯一的

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>

方框1

方框2

然后可以使用值

target.id

来区分这两个div

此外，您还可以使用

drag（）

函数的

target

参数来获取被拖动块的

id

属性，前提是这些块具有分配给它们的

id

属性

这是一张工作票

这里有很多关于HTML5拖放的信息：