JQuery拖放列表问题

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

现在，如果我不拖拽列表并提交表单，所有内容都会按预期提交。但是，如果我将一个元素拖到另一个元素上，则不会提交我拖的元素（或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>

Carlu
CPR大楼

还有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);
            });
        });

$（文档）.ready（函数（）{
$（“#可排序的建筑物”）.sortable（）；
$（“#所选建筑”）。更改（功能（）{
$（“#可排序的建筑物”）.html（“”）；
var str=“”；
$（“#所选建筑选项：所选”）。每个（功能（）{
str++'
'+$（this）.text（）++'
'
});
$（“可分类的建筑物”）。追加（str）；
});
});

编辑：

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

在

标记中提交表单时，每个隐藏元素都应序列化并提交。为此，我认为当您拖动一个元素时，它超出了

标记，因此没有提交

---

添加：不需要创建隐藏元素来存储

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

方法存储任何

元素的数据

为表单分配自定义事件处理程序

在这种情况下，代码的第（1）点是：

/*存储并附加
标记*/

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 :-)
}

var templast=$（“
其他内容，但没有隐藏字段”
”；
templast.data（“value”，$（this.attr（“value”）；//存储128/158您想要的任何内容
$（目标）.append（圣堂武士）；
//绑定表单提交选项
$（this.parent（）.bind（“submit”，function（））
{ 
//用数据序列化所有
标记：-）
}

/*在
标记内检索*/
提交时，每个隐藏元素都应序列化并提交。为此，我认为当您拖动元素时，它超出了
标记，因此未提交

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 :-)
}


添加：不需要创建隐藏元素来存储
元素的值。应遵循以下方法：

方法存储任何
元素的数据
为表单分配自定义事件处理程序
在这种情况下，代码的第（1）点是：

/*存储并附加
标记*/

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 :-)
}

var templast=$（“
其他内容，但没有隐藏字段”
”；
templast.data（“value”，$（this.attr（“value”）；//存储128/158您想要的任何内容
$（目标）.append（圣堂武士）；
//绑定表单提交选项
$（this.parent（）.bind（“submit”，function（））
{ 
//用数据序列化所有
标记：-）
}

/*retrieve*/
问题在于表单标记位于包含表单元素的表内。将表单标记移到表外，元素将正确提交

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 :-)
}

p.S.我只在FF中遇到过这个问题，即即使表格中有表单标记，也可以正常工作。
问题在于表格中包含表单元素的表单标记。将表单标记移到表格之外，元素将正确提交

另一方面，我只是在FF中被这个问题困扰过，即即使表格标签放在表格中也能正常工作。
结果是我把表格标签放在了表格中：（结果是我把表格标签放在了表格中：(