jquery 可排序可拖动列表 - 问题

Question

我使用 jQuery 的可排序可拖动列表有一些问题：

1. 加载页面并按下提交按钮时，cgi 使参数 my_selected_headers 为空。
2. 当加载页面更改列表顺序（通过拖动）并按下提交按钮时，cgi 获取的参数 my_selected_headers 不为空。
3. 当按下“添加”按钮以将项目从一个列表添加到可排序可拖动列表并按下提交按钮时，cgi 会获取参数 my_selected_headers ，而无需新项目（在大多数情况下）例）。
4. 参数 my_selected_headers 中的项目看起来：“Main[]=one&Main[]=two&MAIN[]=三”。 其中参数名称为：Main_one、Main_two 和 Main 3。

我正在使用以下代码：

在就绪方法中：

<TMPL_LOOP MY_HEADERS>
            var value = "<li id=\"<TMPL_VAR HEAD>\" class=\"handle\"><TMPL_VAR HEAD></li>";
            $("#my_headers").append(value);
            $("#my_h").css('color', 'black');
            $("#trash").show();
        </TMPL_LOOP>

使我的所有标题可排序和可拖动：

$(function() {
        $('ul.sortable').sortable({
            tolerance: 'pointer',
            cursor: 'pointer',
            dropOnEmpty: true,
            connectWith: 'ul.sortable',
            update: function(event, ui) {
                $("input#my_headers-log").val($('#my_headers').sortable('serialize'));
                if(this.id == 'trash') {
                    // Remove the element dropped on #trash
                    $('#'+ui.item.attr('id')).remove();
                } else {
                    // Update code for the actual sortable lists
                }
            }
        });
    });

当单击“添加我的标题”按钮以添加新标题时：

        $(function(){
        $("#addHeader").click(function(){
            var value = $("#my_possible_headers option:selected").text();
            var value2 = "<li id=\""+value+"\" class=\"handle\">"+value+"</li>";
            $("#my_headers").append(value2);
            $("#my_h").css('color', 'black');
            $("#trash").show();
        });
    });

为了显示列表（在表中）：

<tr>
            <td style="width: 200">Headers list:</td><td>
            <select id="my_possible_headers" style="width: 200" name="my_possible_headers"><TMPL_VAR MY_POSSIBLE_HEADERS></select></td>
            <td><input id="addHeader" class="add_button" type="button"/></td>
            <td id="my_h" style="color:white;text-align:center;text-decoration:underline">Selected headers:</td>
        </tr>
        <tr>
            <td></td><td></td>
            <td><ul id="trash" class="sortable"></ul></td>
            <td><ul class="sortable regular" id="my_headers"></ul>
            <input name="my_selected_headers" type="hidden" size="70" id="my_headers-log"></input></td>
        </tr>

任何人都可以找出我的代码中有什么问题？

预先感谢

迈克

Answer 1

也许你可以解释一下你想要做的事情？

其一：

 $('ul.sortable').sortable({
        tolerance: 'pointer',
        cursor: 'pointer',
        dropOnEmpty: true,
        connectWith: 'ul.sortable' // ?????

为什么要将列表与其自身连接起来？