Jquery

Question

更新：我已经更改了 jsfiddle。我确信元素必须加载 javascript/jquery 才能获得 jquery 行为。 javascript 寡妇的底部包含 existing_js var，我认为应该使用它来插入元素。它被附加到适当的区域（#drop-area），但它仍然不可排序或无法将 "fields" 放入其中。 jsfiddle link 已更改为这个新版本。

我有一个拖放序列化列表。我正在将它拖放到我的 "workarea" 中。我刚刚在工作区中添加了一个预加载元素 ("fieldset")。当我对工作区中的元素进行排序时，控制台日志会显示序列化的可排序数据。现在，当我查看控制台日志（js window 中的第 118 行）时，序列化数据中未列出现有元素。我确定我必须以某种方式注册它，但我不确定如何注册。下面的 JSfiddle link。

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

感谢观看。

JSFiddle Here!

 $(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 = "<div buttonController='" + f_ID + "'  class='removeButton'><img src='https://www.shareicon.net/data/128x128/2015/11/10/160511_delete_256x256.png' class='removeField' targetField='" + f_ID + "' height='20px'> </div>";
        $(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 = "<div buttonController='" + clone_ID + "' class='removeButton'><img src='https://www.shareicon.net/data/128x128/2015/11/10/160511_delete_256x256.png' class='removeField' targetField='" + clone_ID + "' height='20px'> </div>";
        $(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

It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number".

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

您当前的代码是：

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

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

<div class='tile ui-draggable connectedSortable dropped' id='fs_0' 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);
 }

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

Jquery - Serializing drop and down group with existing element

jquery-ui

jquery-ui-sortable