Jquery拖放可排序列表

Question

更新：对于任何寻求此类答案的人......以下答案是正确的。我已经用更正的代码更新了 jsfiddle。

我创建了一个 jquery 拖放列表。基本上我可以将“Fieldsets”拖放到一个div中。然后我可以重新排序/排序这些字段集。我希望能够将“字段”拖放到已经在可排序 div 中的字段集中。必须将字段放入字段集中，而不是可排序的字段集列表（这保留了字段集的位置。

现在一切正常，除了字段不会附加到字段集中。首先，我将 Fieldset 1 拖到右侧的可排序 div 中。然后我将标题为“Field One”的图块拖到“Drop fields here!”行下方的 Fieldset 1 中。但该字段不会附加到该字段集。

谁能告诉我我做错了什么？

JSFIDDLE

  $(document).ready(function() {
  $("#drop-area").droppable({

    accept: '.ui-draggable:not(.draggableField)',
    drop: function(event, ui) {
      var clone = $(ui.draggable).clone()
      clone.addClass('.connectedSortable')
      clone.removeClass('.ui-draggable');
      if (clone.hasClass('dropped')) {
            return false;
        }
        clone.addClass('.connectedSortable').addClass('dropped');

      $(this).append(clone);

    }
  });

    $(".fieldDroppable").droppable({
    // accept: '.draggableField:not(.ui-draggable)',
    drop: function(event, ui) {
      var clone = $(ui.draggable).clone()
      $(this).append(clone);
    }
  });

  $(".ui-draggable").draggable({
    opacity: 1.0,
    helper: 'clone',
    revert: 'invalid'
  });
    $(".draggableField").draggable({
    opacity: 1.0,
    helper: 'clone',
    revert: 'invalid'
  });

  $("#drop-area").sortable();
  $("#drop-area").disableSelection();

});

Answer 1

更新$("#drop-area")的代码：

$("#drop-area").droppable({
    accept: '.ui-draggable:not(.draggableField)',
    drop: function(event, ui) {
      var clone = $(ui.draggable).clone()
      clone.addClass('.connectedSortable')
      clone.removeClass('.ui-draggable');
      if (clone.hasClass('dropped')) {
            return false;
        }
        clone.addClass('.connectedSortable').addClass('dropped');

      $(this).append(clone);

      var fieldsDroppable = $('#drop-area .ui-draggable:last-child .fieldDroppable');

      fieldsDroppable.droppable({
        drop: function(event, ui) {
          var clone = $(ui.draggable).clone()
          $(this).append(clone);
        }
      });
    }
  });

我已经添加了这部分：

var fieldsDroppable = $('#drop-area .ui-draggable:last-child .fieldDroppable');
fieldsDroppable.droppable({
    drop: function(event, ui) {
        var clone = $(ui.draggable).clone();
        $(this).append(clone);
    }
});

它之前没有工作的原因是因为在您将可放置元素添加到该黑色区域后，您不会为已放置的元素（字段集 + 字段）重新注册 jQuery 事件，因此，它不允许将“字段”放入其中。