Jquery在可排序列表上拖放

更新：对于任何寻求这类答案的人来说……下面的答案是正确的。我已经用正确的代码更新了JSFIDLE

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

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

有人能告诉我我做错了什么吗

更新了

$（“#放置区”）的代码
：

我增加了这一部分：

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

它之所以不起作用，是因为在您将可拖放元素添加到黑色区域后，您没有为被删除的元素（字段集+字段）重新注册jQuery事件，因此，它不允许将“字段”放入其中。
感谢您对其进行处理。我正在尝试确保“字段一”只会放入“字段集”元素。通过删除“not…”可以将字段1删除到可排序的字段集列表中。我尝试只将字段删除到以前删除的字段集中。@Brent我已更新了我的答案。我希望这能解决您的问题！@Brent我很高兴它能为您工作。：）别忘了向上投票并接受我的答案，因为它确实对我有帮助！在
字段dropable.dropable（{
添加
接受：'.draggableField'，
行之后，应该解决它。工作。再次感谢。
$("#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);
    }
});