Jquery-使用现有元素序列化下拉组

更新：我已经更改了JSFIDLE。我确信元素必须加载javascript/jquery才能获得jquery行为。javascript窗口的底部保存着现有的_js var，我认为应该使用它来插入元素。它被附加到适当的区域（#drop area），但它仍然不可排序或无法将“字段”放入其中。JSFIDLE链接已更改为此新版本

我有一个拖放序列化列表。我把它拖放到我的“工作区”。我刚刚在工作区中添加了一个预加载的元素（“fieldset”）。当我对工作区中的元素进行排序时，控制台日志会显示序列化的可排序数据。现在，当我查看控制台日志（js窗口中的第118行）时，序列化数据中没有列出现有元素。我确信我必须以某种方式注册它，但我不确定如何注册。下面是JSfiddle链接

要重新创建问题，请查看开发人员工具中的控制台日志。将左侧菜单“Form Structure”下的任意元素拖动到“Working Area”中。当您拖放元素（通过右上角的句柄）时，它将创建序列化数据的控制台日志。它不考虑预先存在的可排序元素

谢谢你看

$（函数（）{
$（'#accordion'）。查找（'.accordion切换'）。单击（函数（）{
//展开或折叠此面板
$（this.next（）.slideToggle（'slow'）；
//隐藏其他面板
//$（“.accordion content”）.not（$（this.next（））.slideUp（'slow'）；
});
函数随机字符串（长度、字符）{
var结果=“”；
对于（var i=length；i>0；--i）result+=chars[Math.floor（Math.random（）*chars.length）]；
返回结果；
}       
//var fsID=randomString（8，'0123456789abcdefghijklmnopqrstuvxyzabcdefghijklmnopqrstuvxyz'）；//示例随机字符串…供以后在脚本中使用。
var fs_计数=0；
函数makeFieldTarget（$fs）{
$fs.dropable({
接受：'.DragableField、.activeField'，
drop:函数（事件，ui）{
变种克隆，克隆类；
if（ui.draggable.data（“源”）=“侧栏”）{
clone=$（ui.draggable.clone（）；
var f_ID=randomString（8，'0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvxyz'）；
clone.removeClass（'draggableField'）.addClass（'activeField'）.attr（'id'，f_id）；
$（此）.append（克隆）；
cloneClass=clone.attr（'class'）；
var buttonad=“”；
$（此）.append（按钮添加）；
$（“.removeField”）。单击(
函数（）{
var deleteTarget=$（this.attr（'targetField'）；
$（“[id*=”+deleteTarget+“]”）.remove（）；
$（this.parent（）.remove（）；
});     
log（'DROPFIELD-您从侧栏中删除了一个字段：'+cloneClass）；
clone.data（“源”、“字段集”）.draggable({
zIndex:1000，
包含：'.ui可排序'
});
}
if（ui.draggable.data（“源”）=“字段集”）{
clone=ui.draggable；
var identifier=clone.attr（'id'）；
clone.detach（）.attr（“style”，“this”）.appendTo（$（this））；
var clone_ID=clone.attr（'ID'）；
$（“[buttonController*=”+clone_ID+“]”）.remove（）；
cloneClass=clone.attr（'class'）；
var buttonad=“”；
$（此）.append（按钮添加）；
$（“.removeField”）。单击(
函数（）{
var deleteTarget=$（this.attr（'targetField'）；
$（“[id*=”+deleteTarget+“]”）.remove（）；
$（this.parent（）.remove（）；
}); 
log（'DROPFIELD-您从字段集中删除了一个字段：'+cloneClass）；
}
}
});
}
$（“#放置区域”）。可放置({
接受：'.ui draggable:not（.draggableField、.activeField）'，
drop：函数（事件、用户界面）{
fs_count++；
var clone=$（ui.draggable.clone（）
clone.addClass（'connectedSortable'）；
if（clone.hasClass（'dropped'））{
返回false；
}
clone.addClass（'connectedSortable drop'）.css（'cursor'，'pointer'）.attr（'id'，'fs\u'+fs\u count）；
$（此）.append（克隆）；
var fs_class=clone.attr（'class'）；
var fs_id=clone.attr（'id'）；
log（'DROPAREA-您添加了一个类为'+fs\u class+'，ID为'+fs\u ID'的字段集）；
makeFieldTarget（clone.find（“.fielddropable”）；
$（“#放置区域”）。可排序（“刷新”）；
}
});
$（“.ui可拖动”）.draggable({
不透明度：1.0，
助手：“克隆”，
回复：“无效”
});
$（“.draggableField”）.data（“源”、“侧栏”）.draggable({
安全壳：“#下降区”，
不透明度：1.0，
助手：“克隆”，
回复：“false”，
zIndex:1000
});
$（“#drop area”）.sortable（{opacity:0.5，stop:function（event，ui）{console.log（“stop”）；}，
包含：'父'，
句柄：'.拖动句柄'，
占位符：“放置占位符”，
物品：“div.dropped”，
更新：停止排序时触发函数（）{//
var dataAuto=$（“#放置区域”）.sortable（“序列化”{
钥匙：“za”，
属性：“id”，
});
console.log（dataAuto）；
}
});
$（“#放置区域”）.disableSelection（）；
});

默认情况下，它通过查看格式为

“setname\u number”

的每个项目的id来工作，并输出类似

“setname[]=number&setname[]=number”

的散列

您当前的代码是：

<div class='tile ui-draggable connectedSortable dropped' id='vuLc3s3c' style='cursor: pointer;' trigger='existing_fs'>

然后你会看到：

za[]=1&za[]=0

运行

update

时

还要进行以下更改：

 items: "> div.dropped",
 update: function() { //triggered when sorting stopped
   var dataAuto = $("#drop-area").sortable("serialize", {
     key: "za[]",
     attribute: "id",
   });
   console.log(dataAuto);
 }

---

“默认情况下，它通过查看格式为

“setname\u number”

的每个项目的id来工作，并输出一个散列，如

“setname[]=number&setname[]=number”

“预先存在的元素的

id

是什么？也许你希望它是

id=fs_0

？我就知道你很快就会把它删掉。再次感谢你。

za[]=1&za[]=0

 items: "> div.dropped",
 update: function() { //triggered when sorting stopped
   var dataAuto = $("#drop-area").sortable("serialize", {
     key: "za[]",
     attribute: "id",
   });
   console.log(dataAuto);
 }