可排序的 Jquery 拖放

Question

我需要帮助才能使用拖放功能。我有一个表单生成器，其工作方式如下。您将字段集从左侧列表拖放到“工作区”中。您可以将多个字段集拖放到工作区中，然后对它们进行重新排序/排序。进入工作区后，您可以将左下方菜单中的“字段”拖放到刚刚放入工作区的字段集中。

我希望能够将已删除的字段从一个字段集中移动到工作区内的另一个字段集中。例如，我在错误的字段集中放置了一个字段并想要移动它。但是，一旦将字段放入字段集中，我就无法移动该字段。请帮我弄清楚我做错了什么。 Fsfiddle 链接和代码如下。

Jsfiddle link

$(document).ready(function() {
    var fs_count = 0;
  $("#drop-area").droppable({
    accept: '.ui-draggable:not(.draggableField)',
    drop: function(event, ui) {
        fs_count++;
      var clone = $(ui.draggable).clone()
      clone.addClass('.connectedSortable')
      // clone.removeClass('.ui-draggable');
      if (clone.hasClass('dropped')) {
            return false;
        }
        clone.addClass('.connectedSortable').addClass('dropped').attr('id', 'fs_' + fs_count);
      $(this).append(clone);

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

    }
  });

    $(".fieldDroppable").droppable({
    accept: '.draggableField',
    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: 'false'
  });

  $("#drop-area").sortable({ 
    handle: '.drag-handle',
    update: function () { //triggered when sorting stopped
    var dataAuto = $("#drop-area").sortable("serialize", {
            key: "za",
            attribute: "id",
        });
            alert(dataAuto);  
    }
  });

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

});

Answer 1

你可以做的一件事。对于放入工作区域中的字段集中的所有字段，添加一个删除按钮，该按钮删除该特定字段集中的特定字段，稍后您可以在另一个字段集中添加相同的字段。

Answer 2

好的，请查看此答案

<div id="draggable" class="ui-widget-content ui-draggable ui-draggable-handle" >
    <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header" style="height: 300px;width: 300px;">
    <div id="droppable1" class="ui-widget-header ui-droppable" style="height: 150px;">
        <p>Cleared!</p>
    </div>
    <div id="droppable2" class="ui-widget-header ui-droppable ui-state-highlight" style="height: 150px;">
        <p>Dropped!</p>
    </div>
</div>

这里是js

$( "#draggable" ).draggable();
$( "#droppable1, #droppable2" ).droppable({
    out: function( event, ui ) {
        $( this ).removeClass( "ui-state-highlight" ).find( "p" ).html( "Cleared!" );
    },
    drop: function( event, ui ) {
        $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
    }
});

对于可拖动，使用遏制来限制移动。希望这会有所帮助。