Question

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

<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函数。

Answer 2

这里有你可以使用的jquery cookie插件：

https://github.com/carhartl/jquery-cookie

这是一个将jquery和php存储在数据库中的示例。

http://code.tutsplus.com/tutorials/simple-draggable-element-persistence-with-jquery--net-7474

这里有一个jquery插件存储为cookie的工作示例。

<强> JS

jQuery.cookie = function (key, value, options) {

    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);

        if (value === null || value === undefined) {
            options.expires = -1;
        }

        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }

        value = String(value);

        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }

    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};

//------------------------------------------------END of plugin!---------------------------------
$('div:first').draggable({
   stop: function(event, ui) { 
       $.cookie('div1x', $(this).css('left'));
       $.cookie('div1y', $(this).css('top'));
       }
});
$('div:last').draggable({
   stop: function(event, ui) { 
       $.cookie('div2x', $(this).css('left'));
       $.cookie('div2y', $(this).css('top'));
       }
});
if($.cookie('div1x') != null){
    $('div:first').css('left', $.cookie('div1x'));
}else{
    $('div:first').css('left', '50px');
}
if($.cookie('div1y') != null){
    $('div:first').css('top', $.cookie('div1y'));
}else{
    $('div:first').css('top', '100px');
}
if($.cookie('div2x') != null){
    $('div:last').css('left', $.cookie('div2x'));
}else{
    $('div:last').css('left', '150px');
}
if($.cookie('div2y') != null){
    $('div:last').css('top', $.cookie('div2y'));
}else{
    $('div:last').css('top', '250px');
}

div
{
    width:100px;
    height:100px;
    background-color:cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>

<div></div><div></div>

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

2 个答案: