javascript - 在 jquery 中保存可拖动 div 的位置

Question

我的 jsp 中有一些可拖动的 div，我可以将其拖动到整个页面。拖动后有一个保存按钮，单击该按钮我想将网格的位置保存在 cookie 或数据库中，无论哪种解决方案都更好。请建议我该怎么做。下面是我的可拖动代码

<div id="drag">
    <div>
        <div>
            <div>
                This div is draggable
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#drag').draggable();
    })
</script>

Answer 1

基本上您想要获取 X/Y 坐标并保存它们。这可以是到本地存储，设置一个 cookie，将它发送到一个 API，没关系。但这就是您获取信息的方式。

<div id="drag">
    <div>
        <div>
            <div>
                <p>This div is draggable</p>
                <button id="saveMe">Save</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
    if (local.get('divOffset')) {
        //check if local storage already has your offset. and set it
        $('#drag').css(local.get('divOffset'))
    }

    $('#drag').draggable();

    $('#drag').on('click', '#saveMe', function () { 
        // we're listening for a click event on the saveMe button
        var $drag = $('#drag'),
        //assigning the #drag div jQ obj to a variable
            offset = $drag.offset(); 
        // grabbing the offset: Object {top: 157.5, left: 150}
        local.set('divOffset', offset);
        //save the offset(local storage)
    });

});

function Local () {
    return {
        set : function (key, obj) {
            localStorage.setItem(key, JSON.stringify(obj));
            return obj;
        },
        get : function (key) {
            var obj = {};
            if (localStorage.getItem(key) !== 'undefined') {
                obj = JSON.parse(localStorage.getItem(key));
            }
            return obj;
        },
        clear : function () {
            localStorage.clear();
            return this;
        },
        remove : function (key) {
            localStorage.removeItem(key);
            return this;
        }
    };
}
var local  = Local();

</script>

通过 API 服务将其保存到数据库的好处是，用户可以从一台计算机转到另一台计算机，他们的信息将保持不变。本地存储只会在一台机器上保持持久性。为了举一个例子，我包含了本地存储，因为保存到 API 涉及更多。

这是我很久以前写的本地存储getter/setter函数。