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];

拖放后删除的拖放图像

1 个答案: