Saving position of drag and drop in javascript

user_8938825 0
Viewed 4015

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

css html javascript
1 Answers
  1. Remove the fill div from HTML
  2. Save the side in sessionStoragge if start set left as default
  3. 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);
}
user_91407400
Related