Question

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

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

现在一切正常，除了Field不会附加到fieldset中。首先，我将Fieldset 1拖动到右侧的可排序div中。然后我拖一个标题为＆＃34; Field One＆＃34;进入该行下方的Fieldset 1＆＃34; Drop field here！＆＃34;。但该领域不会附加到该字段集。

有人能告诉我我做错了吗？

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

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

Jquery拖放可排序列表

1 个答案: