Question

我有以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

<div class="dropzone" style="width: 300px; height: 300px; border: 1px solid black;"></div><br>
<div class="dropzone" style="width: 300px; height: 300px; border: 1px solid black;">
</div> <br>
<div class="dropzone" style="width: 300px; height: 300px; border: 1px solid black;">
</div>
<img class="draggable" style="margin: 10px;" src="https://s-media-cache-ak0.pinimg.com/originals/11/b3/c2/11b3c29e3ea42196c9cfea5fd00ac546.png" height="100">
<img class="draggable" style="margin: 10px;" src="https://image.spreadshirtmedia.net/image-server/v1/compositions/22839312/views/1,width=300,height=300,version=1478003241/smiley-smile-men-s-t-shirt.jpg" width="100">
<script>
    $(".dropzone").on("dragover", function(ev) {
        ev.preventDefault();
    });
    $(".dropzone").on("drop", function(ev) {
        ev.preventDefault();
        var data = ev.originalEvent.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    });

    $(".draggable").each(function(i) {
        if ($(this).attr('id') == null) {
            $(this).attr('id', 'draggable' + i);
        }
    });
    $(".draggable").on("dragstart", function(ev) {
        ev.originalEvent.dataTransfer.setData("text", ev.target.id);
    });
</script>

https://jsfiddle.net/zpecfp0g/2/

代码工作正常。如果我尝试将img移动到任何div框，它会按预期移动，并且没有问题。

我遇到的问题是，如果我将img中的一个移到另一个img之上，则第一个被删除。

将可拖动文本移动到其他文本或img上时，它可以正常工作，当将img移动到文本上时，它也能正常工作。从我的测试开始，只有在将img移到另一个img时才会出现此问题。

Answer 1

当drop上发生.dropzone事件时，ev.target将成为图片被放置的元素。如果丢弃在另一个图像上，它将尝试将删除的图像附加到现有图像而不是dropzone div 要修理，请更改
ev.target.appendChild(document.getElementById(data));
至 this.appendChild(document.getElementById(data));

JS：如果拖放到另一个img上，拖放img就会消失

1 个答案: