拖放拖放后删除的图像

Question

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

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

如果您删除图像，则实际上会创建原始图像的副本。 因此，您可以多次删除它们。图像获得左侧和顶部值以设置其位置。该值是相对的(以 % 为单位(。那是因为可以放大和缩小。

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

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

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

在这里，您可以看到主要的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 父元素：

假设放置区是一个<div>元素

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