Question

无法弄清楚如何获得订单（如果可能的话，还有更多信息，如父母的div id），按以下方式排序：

http://jqueryui.com/demos/sortable/connect-lists.html

http://jqueryui.com/demos/sortable/portlets.html

我想有序列化的东西，但没有运气和知识来完成任务......

Answer 1

我确实找到了解决方案;这是答案：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.4.4.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.sortable.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
    #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    </style>
    <script>
    $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
    </script>
</head>
<body>

<div id="test">


<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id="i1">Item 1</li>
    <li class="ui-state-default" id="i2">Item 2</li>
    <li class="ui-state-default" id="i3">Item 3</li>
    <li class="ui-state-default" id="i4">Item 4</li>
    <li class="ui-state-default" id="i5">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>


  </div>

<input type="button" id="clickme" value="Serialize div" />

<script>
    $('#clickme').click(function () {
        $("#hold").html($('#test *').serialize());
        //alert($('#sortable2').serialize());

        var list = '';
        $('#sortable1 *').each(function() {
            list += $(this).attr('id') + ',';
        });
        alert('list = ' + list);

    });
</script>


</body>
</html>

sortable - 如何使用jQuery序列化他们的信息

1 个答案: