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>

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

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

解决方法

提交时，在

<form>

标记内，每个隐藏元素都应序列化并提交。为此，我认为当您拖动元素时，它超出了the2ѭ标签，因此未提交 另外：您不需要创建隐藏元素来存储

<li>

元素的值。您应该遵循以下方法： .data方法存储任何“ 4”元素的数据 为表单分配一个自定义事件处理程序。 在这种情况下，代码的点（1）将是：

/* store and append <li> tag */

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

/* retrieve */

    ,该问题基于表中包含表单元素的表单标签。将表单标签移到表外，元素将正确提交。 附言我只是在FF中被这个问题所困扰，即使在表中使用了表单标签，IE也可以正常工作。