jQuery拖放并再次拖动答案

【问题标题】：jQuery drag & drop and drag againjQuery拖放并再次拖动
【发布时间】：2010-01-18 16:37:42
【问题描述】：

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

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

谁能给我指点？

谢谢，

阿里。

【问题讨论】：

这篇文章似乎去掉了我的 html。这只是基本的空 div，类名为“dragrow1”和“dragrow2”）

标签： jquery draggable droppable

【解决方案1】：

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

jQuery - manipulate dropped element in sortable list

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

阿里。

【讨论】：