admin管理员组

文章数量:1415460

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>

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./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>

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

  • javascript
  • html
  • css
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 GagoGago 972 silver badges8 bronze badges 7
  • 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

Reset to default 4
  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);
}

本文标签： htmlSaving position of drag and drop in javascriptStack Overflow

版权声明：本文标题：html - Saving position of drag and drop in javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745162563a2645504.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。