Saving position of drag and drop in javascript

Question

So I have this drag and drop script. What I am trying to do is save the position of the dragged item. So if someone refreshes the page. The dragged image should stay in the same spot.I would like to do this in javascript only

.fill {
      background-image: url('https://source.unsplash.com/random/150x150');
      height: 150px;
      width: 150px;
      cursor: pointer;
    }
    
    .hold {
      border: solid 5px #ccc;
    }
    
    .empty {
      height: 56rem;
        width: 36rem;
        margin: 10px;
        border: solid 3px salmon;
        background: white;
      }
    
    
    .hovered {
      background: #f4f4f4;
      border-style: dashed;
    }

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
      <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
    
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <div class="empty">
                <div class="fill" draggable="true"> </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="empty">
              </div>
            </div>
          </div>
        </div>

        <script>
    const fill = document.querySelector('.fill');
    const empties = document.querySelectorAll('.empty');


    // Fill listeners
    fill.addEventListener('dragstart', dragStart);
    fill.addEventListener('dragend', dragEnd);

    // Loop through empty boxes and add listeners
    for (const empty of empties) {
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);
    }

    // Drag Functions

    function dragStart() {
    this.className += ' hold';
    setTimeout(() => (this.className = 'invisible'), 0);
    }

    function dragEnd() {
    this.className = 'fill';
    }

    function dragOver(e) {
    e.preventDefault();
    }

    function dragEnter(e) {
    e.preventDefault();
    this.className += ' hovered';
    }

    function dragLeave() {
    this.className = 'empty';
    }

    function dragDrop() {
    this.className = 'empty';
    this.append(fill);
    }
    </script>

      </body>
    </html>

So I have this drag and drop script. What I am trying to do is save the position of the dragged item. So if someone refreshes the page. The dragged image should stay in the same spot.I would like to do this in javascript only

fiddle

Possible duplicate of [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — , Dec 20 '18 at 12:22
save it's position to [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) on dragend and then on document ready check local storage and see if there are coordinates and set them if they exist — Pete, Dec 20 '18 at 12:23
Dragging and dropping is completely irrelevant here; all you want to do is store a bunch of values and reload them on page load. Don't google for the entire thing you are creating, focus on the specific puzzle piece you need. — , Dec 20 '18 at 12:23

score 4 · Accepted Answer · answered Dec 20 '18 at 12:43

Remove the fill div from HTML
Save the side in sessionStoragge if start set left as default
Append fill div to the side according the session

See working code

JS code:(I didn't add snippet because we can't set session in this site)

const empties = document.querySelectorAll('.empty');
var side=sessionStorage.getItem("side")==""?left:sessionStorage.getItem("side");
console.log(side)
if(side=="right"){
  empties[1].innerHTML = '<div class="fill" draggable="true"> </div>';
}
else{
 empties[0].innerHTML='<div class="fill" draggable="true"> </div>';
}
const fill = document.querySelector('.fill');
// Fill listeners
fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);

// Loop through empty boxes and add listeners
for (const empty of empties) {
empty.addEventListener('dragover', dragOver);
empty.addEventListener('dragenter', dragEnter);
empty.addEventListener('dragleave', dragLeave);
empty.addEventListener('drop', dragDrop);
}

// Drag Functions

function dragStart() {
this.className += ' hold';
setTimeout(() => (this.className = 'invisible'), 0);
}

function dragEnd() {
this.className = 'fill';
}

function dragOver(e) {
e.preventDefault();
}

function dragEnter(e) {
e.preventDefault();
this.className += ' hovered';
}

function dragLeave() {
this.className = 'empty';
console.log(side)
sessionStorage.setItem("side", side=="left"?"right":"left");
}

function dragDrop() {
this.className = 'empty';
this.append(fill);
}

Exactly what i needed. Thank you bro. – Gago Dec 20 '18 at 12:49 — Gago, Dec 20 '18 at 12:49
I am sister and happy to help :) – לבני מלכה Dec 20 '18 at 12:50 — לבני מלכה, Dec 20 '18 at 12:50

Saving position of drag and drop in javascript

1 Answers1