Перетаскивание изображений, удаленных после удаления - PullRequest
Новая
       7

Перетаскивание изображений, удаленных после удаления

0 голосов
/ 03 апреля 2019

Я начал создавать редактор перетаскивания с 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;
    }
}

1 Ответ

0 голосов
/ 14 апреля 2019

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

предполагается, что дропзона является <div> элементом 

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