将拖放位置保存到本地存储

时间:2017-09-25 22:44:25

标签: javascript jquery html drag-and-drop save

我有一些链接可以根据最常用的方式进行排序。我有拖放功能,但无法弄清楚如何保存它,以便在页面重新加载位置时不会发生变化。 最好在本地保存,以便每个人都有自己的结果。我看过几个例子,但找不到与我合作的例子。任何人都知道如何做到这一点?这是我到目前为止所拥有的:

新的堆栈溢出。出于某种原因,当我发布代码时,它并没有显示结果。这是我正在测试的页面的链接。 http://www.foregotten.net/test

感谢。



$(function() {
  $(document).ready(function() {
    $('.event').on("dragstart", function(event) {
      var dt = event.originalEvent.dataTransfer;
      dt.setData('Text', $(this).attr('id'));
    });
    $('table td').on("dragenter dragover drop", function(event) {
      event.preventDefault();
      if (event.type === 'drop') {
        var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
        if ($(this).find('span').length === 0) {
          de = $('#' + data).detach();
          de.appendTo($(this));
        }

      };
    });
  })

});

// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
  window.parent.parent.postMessage(["resultsFrame", {
    height: document.body.getBoundingClientRect().height,
    slug: "None"
  }], "*")
}

table th,
table td {
  height: 30px;
  width: 200px;
}

table span {
  display: block;
  background-color: #fff;
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="#table1" border="1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<BR>
<BR>
<BR>
<table id="#table2" border="1">
  <tr>
    <th>List</th>
  </tr>
  <tr>
    <td><span class="event" id="a" draggable="true"><a href="http://placeholder.net">Content A</a></span></td>
  </tr>
  <tr>
    <td><span class="event" id="b" draggable="true"><a href="http://placeholder.net">Content B</a></span></td>
  </tr>
  <tr>
    <td><span class="event" id="c" draggable="true"><a href="http://placeholder.net">Content C</a></span></td>
  </tr>
  <tr>
    <td><span class="event" id="d" draggable="true"><a href="http://placeholder.net">Content D</a></span></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
&#13;
&#13;
&#13;

0 个答案:

没有答案