保存并加载动态创建的可拖动元素的位置（jQuery-UI）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了保存并加载动态创建的可拖动元素的位置（jQuery-UI）相关的知识，希望对你有一定的参考价值。
我正在开发一个模仿磁板的离线Web应用程序。
我可以动态创建可拖动的项目并将它们拖动到屏幕上。现在我希望能够将元素的位置和内容（每个元素只有一个图像）保存到文件中，然后再次加载它。
我希望它在一个文件中，因为它需要在不同的用户之间互换。
这是我如何动态创建我的元素的javascript：
$("#item1").mousedown(function (e){
var newpin = document.createElement("DIV");
var pinimage = document.createElement("IMG");
pinimage.setAttribute("src", "Media/2D_Container_Alfa.jpg");
pinimage.setAttribute("height", "70px");
newpin.setAttribute("position","relative");
newpin.setAttribute("top","20px");
newpin.setAttribute("left","140px");
newpin.setAttribute("display","block");
newpin.setAttribute("class", "draggable ui-draggable ui-draggable-handle");
newpin.appendChild(pinimage);
document.body.appendChild(newpin);});
TLDR。：我想在磁板上保存配置，并能够加载以前保存的配置
答案
您可以考虑一些较新的代码：
function makePin(event, t, l){
var $pin = $("<div>", {
class: "pin draggable ui-draggable ui-draggable-handle"
}).css({
position: "relative",
top: (t !== undefined ? t + "px" : "20px"),
left: (l !== undefined ? l + "px" : "140px"),
disply: "block"
}).appendTo(".pin-area");
var $pinImage = $("<img>", {
src: "Media/2D_Container_Alfa.jpg"
}).css({
height: "70px"
}).appendTo($pin);
return $pin;
}
function getPins(){
var pins = [];
$(".pin-area .pin").each(function(ind, el){
var pos = $(el).offset();
var imgSrc = $("img", el).attr("src");
pins.push({
top: pos.top,
left: pos.left,
src: imgSrc
});
});
return pins;
}
$("#item1").mousedown(function (e){
makePin(e);
});
由于您的帖子中没有包含任何html，我会考虑以下与上述代码的关系：
<body>
<div class="pin-area">
</div>
</body>
您也没有说明在收集数据或如何加载数据后会启动保存的数据。一种方法是在任何拖动动作完成后更新，绑定到stop。您也没有提到要存储此数据的位置。以下做出一些假设，您将使用Draggable和LocalStorage。
$(".pin").on("dragstop", function(e, ui){
localStorage.setItem("pins", JSON.stringify(getPins()));
});
每次移动一个引脚时，这将使用JSON文本更新本地存储的变量。
function loadPins(){
var pins = JSON.parse(localStorage.getItems("pins"));
if(pins !== undefined){
$.each(pins, function(k, v){
makePin(null, v.top, v.left);
});
}
}
然后，该功能可以加载这些引脚。你想在关闭jQuery块之前执行这个函数。一个小例子都放在一起。您需要进行更多测试和调整以满足您的需求。
$(function() {
function makePin(event, t, l) {
var $pin = $("<div>", {
class: "pin draggable ui-draggable ui-draggable-handle"
}).css({
position: "relative",
top: (t !== undefined ? t + "px" : "20px"),
left: (l !== undefined ? l + "px" : "140px"),
disply: "block"
}).appendTo(".pin-area");
var $pinImage = $("<img>", {
src: $(".example-image").attr("src")
}).css({
height: "70px"
}).appendTo($pin);
$pin.draggable();
return $pin;
}
function getPins() {
var pins = [];
$(".pin-area .pin").each(function(ind, el) {
var pos = $(el).offset();
var imgSrc = $("img", el).attr("src");
pins.push({
top: pos.top,
left: pos.left,
src: imgSrc
});
});
return pins;
}
function loadPins() {
var pins = JSON.parse(localStorage.getItems("pins"));
if (pins !== undefined) {
$.each(pins, function(k, v) {
makePin(null, v.top, v.left);
});
}
}
$(".pin").on("dragstop", function(e, ui) {
localStorage.setItem("pins", JSON.stringify(getPins()));
});
$(".pin-area").mousedown(function(e) {
makePin(e);
});
loadPins();
});.pin-area {
width: 1200px;
height: 630px;
border: 1px solid #222;
background-image: url("https://www2.lbl.gov/assets/img/maps/sitemap.jpg");
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="pin-area">
</div>
<p>Example Pin:</p><img class="example-image" style="height: 70px;" src="https://www.clker.com/cliparts/r/R/m/q/E/6/orange-pin-th.png">以上是关于保存并加载动态创建的可拖动元素的位置（jQuery-UI）的主要内容，如果未能解决你的问题，请参考以下文章
滚动浏览器时使用错误起始位置的可拖动 jQuery UI 元素？