0

我正在开发一个拖放页面，您可以在其中将元素从列表中拖放到各种可放置的容器中。这完美地工作。我现在想要实现的是能够将它们从一个容器拖到另一个容器（或在容器内重新排序）。但我似乎无法做到这一点。

该列表看起来像一系列带有标题的彩色框（每个都有一个类名“.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>

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

谢谢，

阿里。

4

1 回答 1

0

我找到了另一种方法，通过使用可拖动和可排序。你可以在这里看到一个单独的主题：

jQuery - 在可排序列表中操作删除的元素

我还没有弄清楚如何在容器之间拖动，因为它实际上不是必需的。

阿里。

于 2010-01-20T16:45:17.120 回答