Блог

Я начал создавать редактор перетаскивания с использованием html и Javascript. В целом все работает нормально.

Вы можете перетаскивать изображения с панели инструментов и помещать их в dropzone.

Если вы удаляете изображение, вы фактически создаете копию оригинала. таким образом, вы можете удалять их несколько раз. Изображения получают значение слева и сверху, чтобы задать их положение. Значение является относительным (в %). Это потому, что можно увеличивать и уменьшать масштаб.

Теперь, если я перенесу изображение на другое, оно будет удалено. К сожалению, я понятия не имею, как это предотвратить.

Я думаю, что основная проблема заключается в том, что удаленное изображение становится дочерним по отношению к уже удаленному, а не к 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;
    }
}
  

Вы должны проверить целевой элемент, если элемент имеет тип IMG, получите родительский элемент dropzone:

предположим, что dropzone является <div> элементом

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