Question

我需要帮助让拖放功能起作用。我有一个表单生成器，其工作原理如下。您将Fieldset从左侧列表拖放到＆＃34;工作区＆＃34;。您可以将多个字段集拖放到工作区中，然后对它们进行重新排序/排序。进入工作区域后，您可以放弃一个＆＃34; Field＆＃34;从左下方菜单到您刚刚进入工作区的字段集。

我希望能够在工作区内将丢弃的字段从一个字段集移动到另一个字段集。例如，我在错误的字段集中放置了一个字段并想要移动它。但是，一旦将字段放入字段集，我就无法移动该字段。请帮我弄清楚我做错了什么。 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!" );
    }
});

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

Jquery拖放可排序

2 个答案: