拖动多个 jQuery ui

Question

我可以在不重复所有代码的情况下拖动并保存多个cookie吗？

$(function() {
     $('.demo').draggable({
        cursor: "move"
        ,

        stop: function(event, ui) {
            $.cookie('demox', $(this).css('left'));
            $.cookie('demoy', $(this).css('top'));
        }
    })
     .resizable({
                    aspectRatio: true,
            })
})

$(function() {

    if ($.cookie('demox') != null) {
        $('.demo').css('left', $.cookie('demox'));
    } 

    if ($.cookie('demoy') != null) {
        $('.demo').css('top', $.cookie('demoy'));
    } 
})

Answer 1

你可以这样做：

您可以选择为每个元素使用特定 ID 吗？这样，您可以将相同的处理程序附加到这些对象，并在调用处理程序时通过检查 this

来检查它

Handler 我的意思是

function handler(event, ui)
{
    $.cookie('demox_'+this.id, $(this).css('left'));
    $.cookie('demoy_'+this.id, $(this).css('top'));
}

你可以通过写

附加它做可拖动的

$('.demo').draggable({
    cursor: "move",
    stop: handler
})

当然你必须给你的“.demo”元素一个 ID。

我希望这对你来说是合理的:)

P.S.: 稍后你可以使用以下内容：

$(function() {

    $('[id*="demoID_"]').forEach(function(element)
    {
        if ($.cookie('demox_'+element.id) != null) {
            element.css('left', $.cookie('demox_'+element.id));
        }

        if ($.cookie('demoy_'+element.id) != null) {
            element.css('top', $.cookie('demoy_'+element.id));
        } 
    });
});

希望我没有打错字:)

在这种情况下，您的元素应具有如下 ID：demoID_n，然后 cookie 将存储在 demox_demoID_0、demox_demoID_1 中，依此类推

拖动多个 jQuery ui

Drag more than one jQuery ui

javascript

jquery

jquery-ui