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>

我怎样才能接收到哪个块在 box1 中，在 box2 中等等。我们无法区分这两个盒子，不是吗？

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来区分这两个div了。

此外，您可以使用函数的target参数drag()来获取id被拖动块的属性，假设块具有id分配给它们的属性。

这是一个有效的jsFiddle。

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

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

于 2012-07-27T13:18:51.080 回答