Jquery 在可排序列表上拖放

Question

更新:对于任何寻求此类答案的人......下面的答案是正确的。我已使用更正后的代码更新了 jsfiddle。

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

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

有人可以告诉我我做错了什么吗？

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

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