Сохранить перетаскиваемое другое изображение с помощью sessionstorage - PullRequest
Новая
       7

Сохранить перетаскиваемое другое изображение с помощью sessionstorage

0 голосов
/ 15 января 2019

Я пытаюсь перетащить изображение в 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));
    }
}

1 Ответ

0 голосов
/ 16 января 2019

Сохранение img id в функции drop(): 

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