jQuery-重新注冊后追加

Question

在此腳本上，我具有拖放字段集（左側菜單-頂部）。 將多個字段集拖到右側的“工作區”。 在這些字段集中，是一個用於放置字段的區域（我在其中有一個左菜單-底部）。 將“ Field One”拖放到工作區中任何放置的Fieldset中（“ Drop Fields Here”區域中的行下方）。

然后，我想將那個Field One從Fieldset中移出，然后將其放入工作區中的另一個Fieldset中。 我可以拖動“字段一”，但無法將其追加到新的“字段集”中。

我不想刪除該字段，並用左側菜單中的另一個克隆替換它。 我是jquery新手，所以我的代碼可能有點混亂。 任何幫助是極大的贊賞。 jsfiddle和下面的代碼。

我相信代碼問題在第21-29行之間...但是我不確定。

JsFiddle鏈接

 $(document).ready(function() {
 var fs_count = 0;
$("#drop-area").droppable({
accept: '.ui-draggable:not(.draggableField , .activeField)',
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 fs_class = clone.attr('class');
  alert('You added a field with class ' + fs_class);      
  var fieldsDroppable = $('#drop-area .ui-draggable:last-child .fieldDroppable');
  fieldsDroppable.droppable({
  accept: '.draggableField , .activeField',
      drop: function(event, ui) {          
          var clone = $(ui.draggable).clone();  
          if (clone.hasClass('draggableField')) {  // If else to prevent clones reproducing in Fieldsets when moving from original Fieldset.
          clone.removeClass('ui-draggable , draggableField').addClass('activeField');
          $(this).append(clone);
                    }
                        else {
          // Append the div here? 
          }             
          var cloneClass = clone.attr('class');  // Temporary varialble for develpoment alert below
          alert('you dropped a field' + cloneClass);  // Temporary for development only

                        // Below re-register the "field" with jquery....not sure this is entirely correct.
          var fieldsDraggable = $('#drop-area .ui-draggable .fieldDroppable .activeField');
                fieldsDraggable.draggable();              
      }});
}  });
$(".fieldDroppable").droppable({
accept: '.draggableField , .activeField',
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'
});  
$(".activeField").draggable();
$("#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

這里將有很多工作要做，但是您可以像這樣克服這一障礙：

https://jsfiddle.net/Twisty/6trmrfoo/32/

基本上，您希望在將新的.droppable()添加到#drop-area時，將其分配給字段集中的特定元素。 我建議您使用函數，因為您會多次這樣做。

您還可以使用.data()來存儲source值和可拖動元素。 我只在田野上這樣做，因為那是唯一需要的步伐。 一旦將其放到字段集中，就可以對其進行更新，以便將來可以正確進行拖放操作，我們不想克隆我們移動它的對象。

要移動它，請考慮使用.detach() 。 它會將元素與當前父元素分離，並可以在鏈中用於作為變量追加或移入內存。 與.clone()相似，只是我們要處理實際的對象。 .clone() “復制和粘貼”， .detach() “剪切和粘貼”。

JavaScript的

 $(function() {
   var fs_count = 0;

   function makeFieldTarget($fs) {
     $fs.droppable({
       accept: '.draggableField, .activeField',
       drop: function(event, ui) {
         var clone, cloneClass;
         if (ui.draggable.data("source") == "sidebar") {
           clone = $(ui.draggable).clone();
           clone.removeClass('draggableField').addClass('activeField');
           $(this).append(clone);
           cloneClass = clone.attr('class');
           console.log('DROPFIELD - you dropped a field from the side bar: ' + cloneClass);
           clone.data("source", "fieldset").draggable({
             zIndex: 1000
           });
         }
         if (ui.draggable.data("source") == "fieldset") {
           clone = ui.draggable;
           clone.detach().attr("style", "").appendTo($(this));
           cloneClass = clone.attr('class');
           console.log('DROPFIELD - you dropped a field from a Field set: ' + cloneClass);
         }
       }
     });
   }


   $("#drop-area").droppable({
     accept: '.ui-draggable:not(.draggableField, .activeField)',
     drop: function(event, ui) {
       fs_count++;
       var clone = $(ui.draggable).clone()
       clone.addClass('connectedSortable');
       if (clone.hasClass('dropped')) {
         return false;
       }
       clone.addClass('connectedSortable dropped').attr('id', 'fs_' + fs_count);
       $(this).append(clone);
       var fs_class = clone.attr('class');
       console.log('DROPAREA - You added a field with class ' + fs_class);
       makeFieldTarget(clone.find(".fieldDroppable"));
       $("#drop-area").sortable("refresh");
     }
   });

   $(".ui-draggable").draggable({
     opacity: 1.0,
     helper: 'clone',
     revert: 'invalid'
   });

   $(".draggableField").data("source", "sidebar").draggable({
     opacity: 1.0,
     helper: 'clone',
     revert: 'false',
     zIndex: 1000
   });

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

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

 });