jquery jquery-ui 可排序数组

Question

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

我重新发布这篇文章是为了以防人们错过它，或者看看 UI Sortables 是否超出大多数人的范围 - 所以我提前道歉： 在对 BigG 进行了大量研究之后，到处张贴我仍然没有更接近找到或得到答案，甚至没有看到我能理解的东西。好的，我承认我对 php、css、html 等非常熟悉，但是 js/Jquery 嗯，这对我来说是全新的——。所以我一直在寻找我能理解的东西/解释。可悲的是，对于 JQuery，似乎 99% 的教程等都是以我无法理解的方式编写的。根据其他论坛上的帖子等，我知道我并不孤单，我们正在寻找“傻瓜” 请不要说查看“帮助”项目，例如 http://jqueryui.com/demos/sortable/#event-update - http://jqueryui.com/demos/sortable/#method-toArray - http://jqueryui.com/demos/sortable/#method-serialize，因为它们不是帮助项目对像我这样的人。正如我在其他帖子中所说，它们是“火星人”。

当使用 UISortables 时 - 我如何将“序列化”放入 JQuery 函数中？

我有 4 列类 '.columm'，每列都有一个唯一的 id - col1,col2,col3 & col4 - 就像这样。

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

饲料 Lorem ipsum dolor sit amet, consectetuer adipiscing elit

饲料 Lorem ipsum dolor sit amet, consectetuer adipiscing elit

我可以让拖放位工作我现在需要将“最终”位置放入序列化数组中。

这是我的代码：

$(".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,
});

您将看到警报测试。我已经这样做了，看看是否可以将 col id 设置为警报，我可以，但是我应该放在哪里

.sortable("序列化", [选项]) 以及如何为 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);
                        }
                    });