jquery - 用于动态项目的 jQuery 本地存储
问题描述
我有一系列 jQuery 可拖动/可调整大小的项目,当用户单击菜单中的项目时会动态生成这些项目。我无法弄清楚如何让本地存储工作以保存这些项目的坐标和大小。
如果加载页面时 HTML 中已经存在一个静态项,我可以让基本的本地存储工作,但这种方法似乎不适用于动态。
我应该在动态生成的每个项目的代码块中使用 localstorage.setitem 吗?这似乎有些过分,但将其作为一个函数编写至今失败了。
我在这里研究并尝试了许多现有的解决方案,但似乎没有任何适用于现代 jquery 代码的解决方案,因此非常感谢您提供任何帮助......谢谢。
HTML:
<body>
<div id="outsidecontainer">
<div id="menucontainer">
<ul id="menu">
<li class="ui-widget-header">
<div>Products</div>
</li>
<li>
<div id="rack">Rack</div>
</li>
<li>
<div id="firewall">Firewall</div>
</li>
<li>
<div>Option 3</div>
</li>
</ul>
<button id="clear">Reset all</button>
</div>
<div id="containment-wrapper">
</div>
</div>
</body>
CSS:
#containment-wrapper {
margin-left: 200px;
height: 90vh;
padding: 0.5em;
background-repeat: no-repeat;
background-clip: padding-box;
background-position: 50% 25%;
background-size:80%;
}
#outsidecontainer {
border: 2px solid gray;
}
#menucontainer {
height: 100%;
float: left;
position: fixed;
width: 200px;
z-index: 1;
}
.remove_block{
width: 100%;
text-align: right;
margin: 0 0 10px 0;
cursor: default;
}
div.remove_block:after{
display: inline-block;
content: "\00d7"; /* This will render the 'X' */
}
jQuery:
$(function () {
//DYNAMICALLY generate new copies of items
var i = 1;
$("#rack").click(function () {
var dynamic_div = $("<div />", {
id: "product" + i
})
.css({
id: "draggable",
padding: "0.5em",
//float: "left",
margin: "0 10px 10px 0",
cursor: "move",
position: "absolute",
background: "white"
// border: "1px solid #ccc"
})
.addClass("draggable", "ui-widget-content");
$(dynamic_div)
.append(
'<div id="block_container"><div class="remove_block"></div><img src="https://assets.codepen.io/759025/3500-1.svg" alt="Rack"></div>'
)
.css({
width: 100
});
$(dynamic_div).append("<div>Rack</div>").css({
"text-align": "center",
"font-size": "24px",
padding: " 0.25em",
"line-height": "100%"
//"white-space": "nowrap"
});
// APPEND THE NEWLY CREATED DIV TO "containment-wrapper".
$(dynamic_div)
.appendTo("#containment-wrapper")
.draggable({
containment: "#containment-wrapper",
stack: ".draggable",
scroll: false
})
.resizable({
minHeight: 100,
minWidth: 100,
maxHeight: 500,
maxWidth: 500,
aspectRatio: false
});
i++;
});
//DYNAMICALLY generate new copies of items
var i = 1;
$("#firewall").click(function () {
var dynamic_div = $("<div />", {
id: "product" + i
})
.css({
id: "draggable",
padding: "0.5em",
float: "left",
margin: "0 10px 10px 0",
cursor: "move",
position: "absolute",
background: "white",
border: "1px solid #ccc"
})
.addClass("draggable", "ui-widget-content");
$(dynamic_div)
.append(
'<div id="block_container"><div class="remove_block"></div><img src="https://assets.codepen.io/759025/firewall1.svg" alt="Firewall"></div>'
)
.css({
width: 100
});
$(dynamic_div).append("Firewall").css({
"text-align": "center",
"font-size": "24px",
padding: " 0.25em",
"line-height": "100%"
});
// APPEND THE NEWLY CREATED DIV TO "containment-wrapper".
$(dynamic_div)
.appendTo("#containment-wrapper")
.draggable({
containment: "#containment-wrapper",
stack: ".draggable",
scroll: false
})
.resizable({
minHeight: 100,
minWidth: 100,
maxHeight: 500,
maxWidth: 500,
aspectRatio: false
});
i++;
});
//delete object when x is clicked
$(document).on('click', '.remove_block', function(events){
$(this).parents('div').eq(1).remove();
});
//END
});
解决方案
我看到它的方式是,当您想要存储状态时,当前存在三个事件。
- 追加新项目后
- 删除项目时
- 当您停止拖动项目时。
其中两个是基于点击事件的,而可拖动的 api 有一个stop
你可以使用的事件。
每次都可以使用相同的功能。它将遍历所有元素并存储每种类型、位置和 z-index 以及复制它所需的任何其他元数据。
首先需要做几件事。
- ID 不能在页面中重复,因此您需要改为更改为类。
- 我会添加一个
data-type
属性,这样您就可以在 pge 加载正确的图像、文本等时使用该类型来重现元素
该函数将是map()
创建可以存储的对象数组的简单操作
就像是:
const dataArr = $('#containment-wrapper').children().map(function(){
const $el = $(this);
const obj ={
type: $el.data('type')// from data attribute,
left: $el.css('left'),
top: $el.css('top'),
zIndex: $el.css('zIndex')
}
return obj;
}).get()
localStorage.setItem('elements', JSON.stringify(dataArr))
推荐阅读
- c# - AppDomain.CurrentDomain.GetAssemblies() 没有给出项目参考
- android - 如何更新仅在 Recyclerview 适配器上单击的项目而不是最后一个可见的项目?
- c++ - 根据条件更新时 STM32F769 PWM 输出出现问题
- workflow - 流程工作流:UiPath 中的字典中不存在给定键
- matlab - 如何在 Matlab 中找到不同形状的单元格?
- python - 考虑边界处有效成员的窗口/滑动均值滤波器
- mysql - 在 Sequelize 中仅启用 createdAt 时间戳并忽略 updatedAt 时间戳
- callback - 使用 zoomCallback,我如何将缩放“捕捉”到现有的 x 值?
- java - 测试在多个实例上运行的代码(类似于 PROD 的行为)
- python - 在 groupby 操作期间重命名熊猫数据框中的列