Question

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

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

要重新创建此问题，请查看开发人员工具中的控制台日志。将左侧菜单“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

默认情况下，它通过查看"setname_number"格式的每个项目的ID来运行，并且会发出类似"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 - 使用现有元素

1 个答案: