Сохранить и загрузить положение динамически создаваемых перетаскиваемых элементов (jQuery-UI) - PullRequest
Новая
       12

Сохранить и загрузить положение динамически создаваемых перетаскиваемых элементов (jQuery-UI)

0 голосов
/ 12 сентября 2018

Я нахожусь в процессе разработки автономного веб-приложения, имитирующего магнитную доску.

Я могу динамически создавать перетаскиваемые элементы и перетаскивать их по экрану. Теперь я хочу иметь возможность сохранять позиции и содержимое (по одному изображению на элемент) моих элементов в файл, а затем загружать его снова.

Я хочу, чтобы это было в файле, потому чтоон должен быть взаимозаменяемым между разными пользователями.

Вот 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 .: Я хочу сохранить конфигурацию на моей магнитной плате ииметь возможность загружать ранее сохраненные конфигурации

1 Ответ

0 голосов
/ 13 сентября 2018

Вы можете рассмотреть какой-нибудь более новый код: 

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

ThisФункция сможет загрузить эти контакты.Вы хотите выполнить эту функцию непосредственно перед тем, как закрыть свой блок 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">
...