Jquery - Serializing drop and down group with existing element

问题

UPDATE: I have changed the jsfiddle. I am sure the element has to be loaded the javascript/jquery to get the jquery behavior(s). The bottom of the javascript widow holds existing_js var which I think should be used to insert the element. It is appended to the proper area (#drop-area) but it is still not sortable or able to have "fields" dropped into it. The jsfiddle link has been changed to this new version.

I have a drag and drop serialized list. I am dragging and dropping it into my "workarea". I just added a preloaded element ("fieldset") in the work area. When I sort the elements in the Working Area a console log displays serialized sortable data. Now when I view a console log (line 118 in js window) the existing element is not listed in the serialized data. I am sure I have to register it somehow but I am not sure how. JSfiddle link below.

To recreate the issue, look at the console log in developers tools. Drag any element under the left menu "Form Structure" into the "Working Area". When you drag and drop the elements (by the handle in the upper right corner) it creates a console log of the serialized data. It does not account for the pre-existing sortable element.

Thanks for looking at it.

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

});

回答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/

Your current code says:

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

When Sortable goes to create the Hash, it cannot include this element as it is not in the correct id format. Change it to:

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

and then you will see:

za[]=1&za[]=0

When update runs.

Also make these changes:

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

来源：https://stackoverflow.com/questions/49709913/jquery-serializing-drop-and-down-group-with-existing-element