Question

我正在研究html DnD。我在互联网上看到了很多教程，并得到了一个例子{DnD http://jsbin.com/axegem/1。现在重新排序这些页面的对象之后，我想保存它，但我不知道如何做到这一点，任何人都可以提供帮助。

谢谢！

Answer 1

$("#draggable4").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});
$("#draggable5").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});

Answer 2

<body>
<h1>Avis DnD </h1>

<div id="containment-wrapper">
    <input id="draggable3" class="draggable ui-widget-content">


    <input id="draggable4" class="draggable ui-widget-content">

  </div>
<script>
var sPositions = localStorage.positions || "{}",
    positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
    $("#" + id).css(pos)
})
$("#draggable3").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});
$("#draggable4").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});
</script>


</body>

拖放更改后如何保存html页面

2 个答案: