0

在这个脚本上，我有拖放字段集（左侧菜单 - 顶部）。将多个字段集拖到右侧的“工作区”中。在这些字段集中是一个放置字段的区域（我有一个，左侧菜单 - 底部）。将“Field One”拖放到工作区域中任何已拖放的 Fieldset（在“Drop Fields Here”区域的行下方）。

然后，我想将该字段一从我将其放入工作区域中的另一个字段集中的字段集中移动。我有一个可拖动的字段，但我无法将它附加到新的字段集。

我不想删除该字段并将其替换为左侧菜单中的另一个克隆。我是 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();
});
4

1 回答 1

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

 });
于 2018-04-03T04:01:51.133 回答