使用 sessionStorage 保存可拖动的不同图像

Question

我尝试将图像拖到 div 中，我想用 sessionStorage 保存它，以便将它放在另一个页面的相同位置。

1.我不知道如何保存拖动图像，因为有很多不同的图像。 2. 我尝试了一些东西，但它不起作用

<div  ondrop="drop(event)" ondragover="allowDrop(event)">
<img  src="ayfsdxcfgh.png" draggable="true" ondragstart="drag(event)" id="drag1">
        <img src="aysdx.png" id="drag2" draggable="true" ondragstart="drag(event)" >
    </div>
    <h2>items</h2>
    <div class="items" ondrop="drop(event)" ondragover="allowDrop(event)">  
    </div>

.

    var inventar = {};

function addItem(key, value) {
    inventar[key] = value;
    window.localStorage.setItem("data", JSON.stringify(inventar));
}


function loadInventar() {
    inventar = JSON.parse(window.localStorage.getItem("data"));
    console.log(inventar);
    for (key in inventar) {
        console.log(key + " - " + inventar[key]); 
        document.getElementById(key).appendChild(document.getElementById(inventar[key]));

          var x = document.createElement("IMG");
          x.setAttribute("src", "pic/Icons/' + inventar[key] + '");
          document.getElementById(key).appendChild(x);

        document.getElementById(key).innerHTML = '<img src="pic/Icons/' + inventar[key] + '" onclick="()">';

    }
    return 123;
}

function inventarReset() {
    window.localStorage.clear();
}

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

    console.log(ev);
    console.log(ev.target.id);

    var data = ev.dataTransfer.getData("img");
    addItem(ev.target.id, data);
    console.log(data);
    ev.target.style.border = "0px dashed transparent";
    if (ev.target=="[object HTMLImageElement]"){ //nur ein objekt in jeden kasten
           ev.target = ev.target.parentNode;
        }
    else { 
        ev.target.appendChild(document.getElementById(data));
    }
}

Answer 1

将img id保存在drop()function中：

function drag(ev) {
    ev.dataTransfer.setData("img", ev.target.id);
}
function drop(ev){
  var data = ev.dataTransfer.getData("img");
 sessionStorage.setItem("imgData", data);
}