Question

所以我有这个拖放脚本。我想做的是保存拖动项目的位置。因此，如果有人刷新页面。拖曳的图片应该留在同一位置。我只想在javascript中做

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

所以我有这个拖放脚本。我想做的是保存拖动项目的位置。因此，如果有人刷新页面。拖曳的图片应该留在同一位置。我只想在javascript中做

fiddle

Answer 1

从HTML删除fill div
如果开始将left设置为默认值，则将边保存在sessionStoragge中
根据会话将fill div附加到侧面

See working code

JS代码：（我没有添加代码段，因为我们无法在此站点中设置会话）

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

在JavaScript中保存拖放的位置

1 个答案: