Question

有人可以帮我解决这个问题：

我正在重新发布此信息以防万一人们错过了它，或者看看UI Sortables是否超出了大多数人的意思 - 所以我提前道歉：经过对BigG的大量研究，在那里和任何地方张贴我仍然没有找到或得到答案，甚至看到我能理解的东西。好吧我承认我在家里使用php，css，html等，但js / Jquery ummmm对我来说都是新手 - 。所以我一直在寻找我能理解的事情/解释。遗憾的是，对于JQuery来说，99％的教程等都是以我无法理解的方式编写的。基于其他论坛的帖子等我知道我并不孤单我们正在寻找“假人”请不要说“帮助”项目，如http://jqueryui.com/demos/sortable/#event-update - http://jqueryui.com/demos/sortable/#method-toArray - http://jqueryui.com/demos/sortable/#method-serialize因为他们对像我这样的人没有帮助。正如我在其他帖子中所说，他们是“火星人”。

在UISortables中使用 - 以及如何将“serialize”放入JQuery函数中？

我有4列'.columm'列，每列有一个唯一的id - col1，col2，col3＆amp; col4-喜欢这个。

<div class="column" id="col1(to col4)">

饲料 Lorem ipsum dolor坐在amet，consectetuer adipiscing elit

我可以得到阻力＆amp; drop bit to work我现在需要将“final”位置放入序列化数组中。

这是我的代码：

$(".column").sortable({
        revert: true,
        scroll: true,
        appendTo: 'body',
        connectWith: '.column',
        delay:200,
        stop: function() {
        $(".column").each(function(){
        var test = $(this).attr('id');

    alert(test);

    //
        //var myArray = $(this).sortable("serialize");

        })
    },
    revertDuration:50000,
    scope:'scope',
    opacity: 0.80,
});

您将看到警报测试。我这样做是为了看看我是否可以将警报发送到警报状态，我可以，但我在哪里放

.sortable（“serialize”，[options]）如何为4列创建1个单一序列化数组呢？

在您下次加载页面时如何/在何处设置订单？（好的是，我的意图是“存储”序列化数组）

请帮助 - 谢谢

Answer 1

我猜你想在排序停止时抓取序列化的字符串？或者可以添加一个按钮来提交？

我发布了a demo，并试图涵盖这两种方法，我希望它有所帮助：

$(function() {
    $("#sortable").sortable({
        revert: true,
        scroll: true,
        appendTo: 'body',
        connectWith: '.column',
        delay:200,
        stop: function(){ $(':button').trigger('click') },
        revertDuration:50000,
        scope:'scope',
        opacity: 0.80,
    });

    $(':button').click(function(){
        var string = $("#sortable").sortable("serialize");
        alert( string);
    })

});

Answer 2

上面的答案不起作用！至少，我无法使该方法与多列正常工作。它只适用于一个列表，就像上面链接的演示文件一样。

作为未来用户的参考，您需要做这样的事情才能达到预期的效果：

$( ".column" ).sortable({ 
    connectWith: '.column',
    update: function(event, ui){ 

        var out = "";

        $('.column').each(function(index){
            out += '{';
            out += $(this).attr('id') + ':';
            $("div", this).each(function(index){
                out += '{';
                out += $(this).attr('id') + ':';            
                out += '}';
            });
            out += '}';
        });

        alert(out);

    } 
});

这将输出一些可以在服务器端解析的内容，如下所示：

{COLUMN_1：{wid_1：} {wid_4：} {wid_5：} {wid_2：} {wid_3：}} {COLUMN_2：{wid_6：} {wid_7：} {wid_8：} {wid_9：}} {column_3： {wid_11：} {wid_10：} {wid_12：}}

Answer 3

$('#ul').sortable({
                        opacity: 0.5,
                        items: '> li',
                        update: function(event, ui) {
                            var new_order = $(this).sortable('toArray');

                            var o = { 
                                ids: {} 
                            };
                            for (i = 0; i < new_order.length; i++) {
                                if (new_order[i] !== undefined) {
                                    o.ids[i] = new_order[i];
                                }
                            }

                            console.log(o);
                        }
                    });

jquery jquery-ui可排序数组

3 个答案: