Jquery – 使用现有元素序列化drop和down组

更新：我改变了jsfiddle。 我确定该元素必须加载javascript / jquery才能获得jquery行为。 javascript寡妇的底部包含existing_js var，我认为应该用它来插入元素。 它被附加到适当的区域（#drop-area），但它仍然无法排序或能够将“字段”放入其中。 jsfiddle链接已更改为此新版本。

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

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

谢谢你看着它。

JSFiddle在这里！

$(function() { $('#accordion').find('.accordion-toggle').click(function(){ //Expand or collapse this panel $(this).next().slideToggle('slow'); //Hide the other panels // $(".accordion-content").not($(this).next()).slideUp('slow'); }); function randomString(length, chars) { var result = ''; for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)]; return result; } // var fsID = randomString(8, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'); // Example Random string...for use later in script. var fs_count = 0; function makeFieldTarget($fs) { $fs.droppable({ accept: '.draggableField, .activeField', drop: function(event, ui) { var clone, cloneClass; if (ui.draggable.data("source") == "sidebar") { clone = $(ui.draggable).clone(); var f_ID = randomString(8, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'); clone.removeClass('draggableField').addClass('activeField').attr('id' , f_ID); $(this).append(clone); cloneClass = clone.attr('class'); var buttonAdd = "
 
"; $(this).append(buttonAdd); $(".removeField").click( function () { var deleteTarget = $(this).attr('targetField'); $("[id*='" + deleteTarget + "']").remove(); $(this).parent().remove(); }); console.log('DROPFIELD - you dropped a field from the side bar: ' + cloneClass); clone.data("source", "fieldset").draggable({ zIndex: 1000, containment: '.ui-sortable' }); } if (ui.draggable.data("source") == "fieldset") { clone = ui.draggable; var identifier = clone.attr('id'); clone.detach().attr("style", "").appendTo($(this)); var clone_ID = clone.attr('id'); $("[buttonController*='" + clone_ID + "']").remove(); cloneClass = clone.attr('class'); var buttonAdd = "
 
"; $(this).append(buttonAdd); $(".removeField").click( function () { var deleteTarget = $(this).attr('targetField'); $("[id*='" + deleteTarget + "']").remove(); $(this).parent().remove(); }); console.log('DROPFIELD - you dropped a field from a Field set: ' + cloneClass); } } }); } $("#drop-area").droppable({ accept: '.ui-draggable:not(.draggableField , .activeField)', drop: function(event, ui) { fs_count++; var clone = $(ui.draggable).clone() clone.addClass('connectedSortable'); if (clone.hasClass('dropped')) { return false; } clone.addClass('connectedSortable dropped').css('cursor' , 'pointer').attr('id', 'fs_' + fs_count); $(this).append(clone); var fs_class = clone.attr('class'); var fs_id = clone.attr('id'); console.log('DROPAREA - You added a fieldset with class ' + fs_class + ' & and ID of ' + fs_id); makeFieldTarget(clone.find(".fieldDroppable")); $("#drop-area").sortable("refresh"); } }); $(".ui-draggable").draggable({ opacity: 1.0, helper: 'clone', revert: 'invalid' }); $(".draggableField").data("source", "sidebar").draggable({ containment: '#drop-area', opacity: 1.0, helper: 'clone', revert: 'false', zIndex: 1000 }); $("#drop-area").sortable({opacity: 0.5, stop: function(event, ui) { console.log("stop");}, containment: 'parent', handle: '.drag-handle', placeholder: "drop-place-holder", items: "div.dropped", update: function() { //triggered when sorting stopped var dataAuto = $("#drop-area").sortable("serialize", { key: "za", attribute: "id", }); console.log(dataAuto); } }); $("#drop-area").disableSelection(); }); 

Answer 1

默认情况下，它通过查看"setname_number"格式的每个项目的ID来工作，并且它会发出类似"setname[]=number&setname[]=number"的哈希值。

https://jsfiddle.net/Twisty/tw62fm1p/

您当前的代码说：

当Sortable用于创建哈希时，它不能包含此元素，因为它不是正确的id格式。 将其更改为：

然后你会看到：

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