html - Saving position of drag and drop in javascript

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('');
      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=".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>

.fill {
      background-image: url('https://source.unsplash./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./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>

fiddle

Share Improve this question edited Dec 20, 2018 at 13:37 J.vee 6191 gold badge7 silver badges26 bronze badges asked Dec 20, 2018 at 12:17 Gago 972 silver badges8 bronze badges

1 You can use cookies – Maor Refaeli Commented Dec 20, 2018 at 12:19
Hi.Could you show me how? @MaorRefaeli – Gago Commented Dec 20, 2018 at 12:21
just google 'how to use web cookies', it really easy – Maor Refaeli Commented Dec 20, 2018 at 12:22
1 Possible duplicate of Persist variables between page loads – user5734311 Commented Dec 20, 2018 at 12:22
1 you need to use localStorage. – Ravi Chauhan Commented Dec 20, 2018 at 12:24

| Show 2 more ments

1 Answer 1

Sorted by: Reset to default 4

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);
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Saving position of drag and drop in javascript - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)