在javascript中保存拖放的位置

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中执行此操作

小提琴

Answer 1

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

查看工作代码

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 个解决方案

解决方案1
3 已采纳 2018-12-20 12:43:53

在javascript中保存拖放的位置

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-12-20 12:43:53

解决方案1
3 已采纳 2018-12-20 12:43:53