0

I have a draggable text element that I can drop into different div boxes. But when I drop the text in the box, go to another html site and returns the text has gone back to it's original placement. Is it possible to make the text stay in the box upon reload?

Here is some of my code so far:

<script>
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));
  $('.div2:contains("44")').addClass("rsko").css("background-color", "green");
  $('.div2:not(:contains("44"))').addClass("fsko").css("background-color", "red");
}
</script>


<body>
<div id = "st">
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p id="drag1" draggable="true" ondragstart="drag(event)">44</p></div>
<div class="div2" id= "skoBoks" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
Katrine
  • 1
  • 1
  • 1
    You will need to store where the text currently is, either server-side or using localstorage/cookies client-side. Then re-apply that position when you next load the page. – DBS May 24 '21 at 10:45
  • How? I can't seem to get it to work :( – Katrine May 24 '21 at 11:20
  • https://stackoverflow.com/questions/1458724/how-do-i-set-unset-a-cookie-with-jquery – SKJ May 24 '21 at 13:11

0 Answers0