Поменяйте местами изображения с помощью перетаскивания

Question

У меня есть следующий скрипт, который я собрал вместе с частью другого, что мне нужно, чтобы изменить изображения, перетаскивая красное сердце на синее, синий заменяет красное и наоборот.

Сегодня траулер уничтожает старые.

Javascript:

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

function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

}

Answer 1

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

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();

    var id = ev.dataTransfer.getData("text");
    var element = document.getElementById(id)
    var div = document.getElementById(id).parentNode;
    var clonedHeart = document.getElementById(ev.target.id).cloneNode(true);

    ev.target.parentNode.insertBefore(element, ev.target.id.nextSibling)
    document.getElementById(ev.target.id).remove();
    div.appendChild(clonedHeart);

    ev.dataTransfer.clearData();
}

Надеюсь, это поможет вам.