Jquery - добавление после перерегистрации

Question

На этом скрипте у меня есть перетаскивание наборов полей (левое меню - вверху). Перетащите несколько наборов полей в правую "рабочую область". В этих наборах полей есть область для удаления полей (из которых у меня есть одно, левое меню - внизу). Перетащите "Field One" в любой из удаленных Fieldset (под линией в области "Drop Fields Here") в рабочей области.

Затем я хочу переместить это поле 1 из набора полей. Я поместил его в другой набор полей в рабочей области. У меня есть перетаскиваемое поле 1, но я не могу его добавить в новый набор полей.

Я не хочу удалять поле и заменять его другим клоном из левого меню. Я новичок в jquery, поэтому мой код может быть немного грязным. Любая помощь с благодарностью. Jsfiddle и код ниже.

Я считаю, что проблема с кодом находится между строк 21-29... но я не уверен.

JsFiddle Link

 $(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();

 });