在javascript中保存拖放位置

所以我有这个拖放脚本。我试图做的是保存拖动项目的位置。所以如果有人刷新页面。拖动的图像应该保持在同一位置。我只想用javascript来做这件事

.fill{
背景图像：url（'https://source.unsplash.com/random/150x150');
高度：150像素；
宽度：150px；
光标：指针；
}
.等一下{
边框：实心5px#ccc；
}
.空的{
身高：56雷姆；
宽度：36雷姆；
利润率：10px；
边框：实心三文鱼3份；
背景：白色；
}
.盘旋{
背景#f4；
边框样式：虚线；
}

常量fill=document.querySelector（'.fill'）；
常量清空=document.querySelectorAll（'.empty'）；
//填满听众
fill.addEventListener（'dragstart'，dragstart'）；
填充。添加列表器（'dragend'，dragend）；
//在空框中循环并添加侦听器
for（空的常量）{
空。addEventListener（'dragover'，dragover）；
空。addEventListener（'dragenter'，dragenter）；
空。addEventListener（'dragleave'，dragleave）；
空。addEventListener（'drop'，dragDrop）；
}
//拖动函数
函数dragStart（）{
this.className+='hold'；
setTimeout（（）=>（this.className='invisible'），0）；
}
函数dragEnd（）{
this.className='fill'；
}
函数dragOver（e）{
e、 预防默认值（）；
}
功能性疏水剂（e）{
e、 预防默认值（）；
this.className+=“悬停”；
}
函数dragLeave（）{
this.className='empty'；
}
函数dragDrop（）{
this.className='empty'；
这个。附加（填充）；
}

从HTML中删除

fill

div

将侧边保存在if start set

left

中作为默认值

根据会话将

fill

div追加到侧面

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

常量清空=document.querySelectorAll（'.empty'）； var side=sessionStorage.getItem（“side”）==“”？左：sessionStorage.getItem（“side”）； 控制台日志（侧面） 如果（侧面=“右侧”）{ 清空[1]。innerHTML=''； } 否则{ 清空[0]。innerHTML=''； } 常量fill=document.querySelector（'.fill'）； //填满听众 fill.addEventListener（'dragstart'，dragstart'）； 填充。添加列表器（'dragend'，dragend）； //在空框中循环并添加侦听器 for（空的常量）{ 空。addEventListener（'dragover'，dragover）； 空。addEventListener（'dragenter'，dragenter）； 空。addEventListener（'dragleave'，dragleave）； 空。addEventListener（'drop'，dragDrop）； } //拖动函数 函数dragStart（）{ this.className+='hold'； setTimeout（（）=>（this.className='invisible'），0）； } 函数dragEnd（）{ this.className='fill'； } 函数dragOver（e）{ e、 预防默认值（）； } 功能性疏水剂（e）{ e、 预防默认值（）； this.className+=“悬停”； } 函数dragLeave（）{ this.className='empty'； 控制台日志（侧面） sessionStorage.setItem（“side”，side==“left”？“right”：“left”）； } 函数dragDrop（）{ this.className='empty'； 这个。附加（填充）； }

---

你可以用cookiesHi。你能告诉我怎么用吗@Maorrefaeli只是谷歌“如何使用网络cookies”，它很容易复制你需要使用本地存储。这正是我所需要的。谢谢你，兄弟。我是姐姐，很乐意帮忙：）

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