如何将拖放保存到localStorage? [英] How to save drag&drop to localStorage?

问题描述

我想将拖动保存到localStorage，但是当我刷新时，拖动的位置不是放置它的位置.我使用了jQuery UI | Draggable.

I wanted to save my drag to localStorage but when i refresh , dragged place is not where i dropped it. I used jQuery UI |Draggable.

JSFIDDLE.

我们如何将其保存到localStorage?

How can we save it to localStorage ?

HTML

<p id="text">Lorem ipsum dolor sit amet.</p>
<button id="save">Save localStorage</button>
<button id="clear">Clear localStorage</button>

<div id="append-area"></div>

JS

$(function() {

$("#save").click(function() {
var text =$("#text").text();
$("#append-area").append(text+"<br>");

var appended=$("#append-area").html();
localStorage.setItem("appended",appended);
});

if (localStorage.getItem('appended')) {
  $('#append-area').html(localStorage.getItem('appended'));  
}

$("#append-area").draggable();

$("#clear").click(function() {
 window.localStorage.clear();
 window.location.reload();
});

});

推荐答案

尝试一下，希望这就是您正在寻找的..:)

Try this, Hope this is what you are looking..:)

小提琴链接 https://jsfiddle.net/5mwndskb/1/

 $(function() {
  var getPos = JSON.parse(localStorage.getItem("appended"));
  var currentPos = {
    top: 0,
    left: 0
  };
  if (getPos !== null && getPos.top !== null) {
    $('#append-area').css({
      top: getPos.top,
      left: getPos.left
   }).append(getPos.txt);
  };

  $('#append-area').draggable({

    drag: function(event, ui) {

      currentPos = $(this).position();
    }
  });

  $("#save").click(function() {
    var text = $("#text").text();
    currentPos.txt = text;
    $("#append-area").append(text + "<br>");
    localStorage.setItem("appended", JSON.stringify(currentPos));
  });

  $("#clear").click(function() {
    window.localStorage.clear();
    window.location.reload();
  });

});

这篇关于如何将拖放保存到localStorage?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！