通过拖放交换图像位置

Question

我将以下脚本与另一个脚本的一部分放在一起，我需要通过将红色的心拖到蓝色的心来更改图像，蓝色代替红色，反之亦然。

今天拖网渔船消灭旧的

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

        <img id="drag2"
             src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/256/Heart-red-icon.png"
             draggable="true" ondragstart="drag(event)" width="50px">
    </div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">

        <img id="drag1"
             src="http://icons.iconarchive.com/icons/mirella-gabriele/valentine/256/Heart-blue-icon.png"
             draggable="true" ondragstart="drag(event)" width="50px">

    </div>

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();
}

希望对你有所帮助。

通过拖放交换图像位置

Swap as image positions with drag and drop

html

javascript

drag-and-drop