Question

我正在研究一个拖拉机drop page，您可以将列表中的元素拖动到各种可放置的容器中。这非常有效。我现在想要实现的是能够将这些容器从一个容器拖到另一个容器（或者在容器内重新排序）。但我似乎无法做到这一点。

该列表看起来像一连串带标题的彩色框（每个都有一个类名'.item'）。当您从列表中拖动时，它会克隆它，以便列表保持不变（即不删除块）。

有两个容器（在本例中），类名为“dragrow1”和“dragrow2”。根据您将框拖入哪一行，该块将更改外观。这应该是正常的。麻烦的是让这些盒子再次拖动，无论是在自己的容器内还是另一个容器内，并且没有自己克隆（它需要移动）。顺便说一下，出于样式原因，类名从'.item'变为'.box'。当你将一个彩色的盒子拖到一个容器中时，有什么好处，因为应用了css样式，每个盒子彼此相邻浮动，所以它们从左上角并排放置。

到目前为止，我的jquery代码如下所示：

$(document).ready(function(){

  $(".items").draggable({helper: 'clone'});

  $(".dragrow1").droppable({
    accept: ".items, .box",
    hoverClass: 'dragrowhover',
    tolerance: 'pointer',
    drop: function(ev, ui) {
      var dropElemId = ui.draggable.attr("id");
      var dropElemTitle = ui.draggable.attr("title");
      $(this).append('<div class="box" id="'+dropElemId+'row1">'+dropElemTitle+' - some extra box content here</div>');
      $('div.box a').click(function(){$('#'+dropElemId+'row1').remove()});
    }

  });   
  $(".dragrow2").droppable({
    accept: ".items, .box",
    hoverClass: 'dragrowhover',
    tolerance: 'pointer',
    drop: function(ev, ui) {
      var dropElemId = ui.draggable.attr("id");
      var dropElemTitle = ui.draggable.attr("title");
      $(this).append('<div class="box" id="'+dropElemId+'row2">'+dropElemTitle+' - different content here</div>');
      $('div.box a').click(function(){$('#'+dropElemId+'row2').remove()});
    }
  });
});

容器代码的示例如下所示：

<div class="dragbox-content" style="display:block" >
  <div class="dragrow1">&nbsp;</div>
  <div class="dragrow2">&nbsp;</div>
</div>

任何人都可以给我任何指示吗？

谢谢，

阿里。

Answer 1

我找到了另一种方法，使用draggable with sortable。你可以在这里看到一个单独的主题：

jQuery - manipulate dropped element in sortable list

我还没弄清楚如何在容器之间拖动，因为它实际上并不是一个要求。

阿里。

jQuery拖放再次拖放

1 个答案: