Question

我正在开发一个模仿磁性板的离线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 .：我想将配置保存在我的磁性板上，并能够加载以前保存的配置

Answer 1

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

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）

1 个答案: