Question

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

加载页面并按下提交按钮时，cgi会将参数my_selected_headers设为空。
当加载页面更改列表顺序（通过拖动）并按下提交按钮时，cgi获取参数my_selected_headers非空。
当按下“添加”按钮以便将项目从一个列表添加到可排序 - 可拖动列表并按下提交按钮时，cgi获取参数my_selected_headers而没有新项目（在大多数情况下）例）。
my_selected_headers参数中的项目：“Main[]=one&Main[]=two&MAIN[]=three”。 params的名称是：Main_one，Main_two和Main三。

我使用以下代码：

在ready方法中：

<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' // ?????

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

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

1 个答案: