Jquery 拖放可排序列表

Question

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

我创建了一个 jquery 拖放列表。基本上我可以将 "Fieldsets" 拖放到 div 中。然后我可以 reorder/sort 那些字段集。我希望能够将 "field" 拖放到已经在可排序 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);
    }
});

它之前不起作用的原因是，在将可放置元素添加到该黑色区域后，您不会 re-register jQuery 放置元素（字段集 + 字段）的事件，并且因为其中，它不允许将 "fields" 放入其中。

Jquery 拖放可排序列表

Jquery Drag and Drop over sortable list

css

jquery

drag-and-drop

jquery-ui-sortable