javascript - 将存储在 localStorage 中的 jQuery 可拖动位置保存到 MySQL

Question

我正在使用以下脚本来跟踪和保存多个可拖动的 图像位置到 localStorage。

https://jsfiddle.net/jakecigar/v685v9t6/31/

var positions = JSON.parse(localStorage.positions || "{}");
$(function () {
    var d = $("[id=draggable]").attr("id", function (i) {
        return "draggable_" + i
    })
    $.each(positions, function (id, pos) {
        $("#" + id).css(pos)
    })

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

在 php/html 方面，我想通过提交按钮将这些位置写入 MySQL 数据库，并以相同的方式从数据库恢复它们。

Answer 1

这里是修改后的 JavaScript 代码，允许将位置写入数据库并重新加载。

<script type="text/javascript">
    $(document).ready(function() {
        var positions = JSON.parse(localStorage.positions || "{}");
        $(function() {
            var d = $("[id=draggable]").attr("id", function(i) {
                return "draggable_" + i
            })


            $.each(positions, function(id, pos) {
                $("#" + id).css(pos)
            })

            d.draggable({
                containment: "#containment-wrapper",
                scroll: false,
                stop: function(event, ui) {
                    positions[this.id] = ui.position
                    localStorage.positions = JSON.stringify(positions)
                }
            });
            $(".saveable").click(function() {
                $.ajax({
                    type: 'POST',
                    url: 'mysql-write.php',
                    data: {
                        myVar: JSON.stringify(positions),
                    },
                    success: function(data) {
                        console.log(data);
                    }
                });
            });


            $(".loadable").click(function() {
                $.ajax({
                    url: 'mysql-read.php',
                    dataType: 'json'
                }).done(
                    function(data) {
                        var newpos = data[0];
                        var positions = JSON.parse(newpos);
                        $.each(positions, function(id, pos) {
                            $("#" + id).css(pos)
                        })
                        localStorage.positions = newpos
                    }
                );
            });
        });
    });
</script>

mysql-read.php 应该提取数据。

echo json_encode(array($row['data']));

mysql-write.php 应该写入传递给数据库的变量。

$writethis = $_POST['myVar'];