JQuery拖放列表问题

Question

我在我的网站上创建了一个可拖放列表，并且它的拖放功能似乎正在工作。每个列表元素内部都有一个“隐藏”表单字段，其中包含与每个列表元素相关的数据。

现在，如果我根本不拖动列表并提交表单，所有内容都会按预期提交。但是，如果我将一个元素拖动到另一个元素上，则我拖动的元素（或其 DOM 发生移动的任何元素）不会被提交。不太确定这里发生了什么。以下是每个可拖动元素的片段：

<ul class="sortable ui-sortable" id="sortable_buildings">
<li class="ui-state-default" id="1" style=""><input type="hidden" name="order[]" value="128"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Carlu</li>

<li class="ui-state-default" id="1"><input type="hidden" name="order[]" value="158"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CPR Building</li>
</ul>

和 JQuery 魔法

$(document).ready(function(){
            $("#sortable_buildings").sortable();

            $('#selected_buildings').change(function(){
                $('#sortable_buildings').html('');
                var str = "";
                $("#selected_buildings option:selected").each(function () {
                   str +=  '<li class="ui-state-default" id="1"><input type="hidden" name="order[]" value="' + $(this).attr('value') + '" /><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + $(this).text() + '</li>'
                 });
                 $("#sortable_buildings").append(str);
            });
        });

编辑：

注意到这对于在表单中创建/修改的所有项目来说都是一个问题。我该如何正确提交表格？

Answer 1

当您提交时，在

标记内，每个隐藏元素都应该被序列化并提交。为此，我认为当您拖动一个元素时，它会超出 标记，因此不会提交

---

另外：您不需要创建一个隐藏元素来存储 的值

元素。您应该遵循以下方法：

1. .data 方法来存储任何
2. 元素
3. 为表单分配自定义事件处理程序。

在这种情况下，代码的第 (1) 点将是：

/* store andappend

;标签 */

var tempList=$("<li>other stuff but no hidden field</li>");
tempList.data("value", $(this).attr("value"); // store 128/158 whatever you want
$(target).append(tempList);

// bind form submit option
$(this).parent().bind("submit", function() 
{ 
// serialize all <li> tag with data :-)
}

/* 检索 */

Answer 2

问题是基于包含表单元素的表内的表单标签。将表单标签移到表格之外，元素将正确提交。

PS 我只在 FF 中被这个问题困扰，即使表格内有表单标签，IE 也能正常工作。