拖放后删除的拖放图像

Question

我已经开始使用 html 和 Javascript 构建拖放编辑器。总而言之，它工作正常。

您可以将图像从工具栏中拖放到放置区。

如果您删除图像，您实际上会创建原始图像的副本。因此您可以多次丢弃它们。图像获得一个 left 和 top 值来设置它们的位置。该值是相对的（以 % 为单位）。那是因为它可以放大和缩小。

现在，如果我将图像放在另一个图像上，它就会被删除。不幸的是，我不知道如何防止这种情况发生。

我认为主要问题是，丢弃的图像成为已经丢弃的图像的子图像，而不是 dropzone 的子图像。但是阻止事件捕获并没有帮助。

如果有人可以帮助我，那就太好了。

在这里您可以看到主要的 js 拖放功能。我认为这是可以解决问题的位置。如果您需要任何其他代码，请告诉我。

function allowDrop(ev) {
    ev.preventDefault();
}

function DragStart(ev) {
    ev.dataTransfer.setData("application/json",        JSON.stringify([ev.target.id,(ev.offsetX || ev.clientX - $(ev.target).offset().left),(ev.offsetY || ev.clientY - $(ev.target).offset().top)]));
}

function DropIt(ev) {
    ev.preventDefault();
    var data = JSON.parse(ev.dataTransfer.getData("application/json"));
    var width = document.getElementById("dropzone").clientWidth;
    var height = document.getElementById("dropzone").clientHeight;

    var copyimg = document.createElement("img");
    var original = document.getElementById(data[0]);
    copyimg.src = original.src;
    ev.target.appendChild(copyimg);

    copyimg.style.left =(ev.clientX - (screen.width - width) * 0.5 - data[1]) / width *100 + '%';
    copyimg.style.top = (ev.clientY - screen.height * 0.2 - data[2]) / height *100 + '%';
    return false;
    }
}

Answer 1

你必须检查目标元素，如果元素是IMG类型，则获取dropzone父元素：

假设 dropzone 是 <div> 元素

   if(ev.target.tagName!="DIV")
      ev.target=$(ev.target).closest('div')[0];