时间戳

首页 > 解决方案 > 保存和加载动态创建的可拖动元素的位置（jQuery-UI）

html - 保存和加载动态创建的可拖动元素的位置（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.：我想将配置保存在我的磁板上并能够加载以前保存的配置

标签： htmljquery-uidynamicsaveload

解决方案

您可以考虑一些较新的代码：

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

推荐阅读