我可以将一个项目从一个手风琴拖到另一个手风琴吗？

Question

是否可以通过将其从另一个手风琴中拉出来将其添加到手风琴控制中？

1. 我创建了一个名为MainAccordion
2. 手风琴我创建了一个名为另一手风琴MenuAccordion
3. 我想从MenuAccordion拖动项目MainAccordion

Answer 1

这是可能的，虽然你可能需要编写一个小。我为你掀起了一个小提琴：http://jsfiddle.net/LfaRk/1/

让我们通过它。 HTML很简单，与CSS相同。

中的JavaScript：

$(function() { 
    $("#catalog").accordion(); 
    $("#catalog2").accordion(); 
    $("#catalog h2").draggable({ 
     appendTo: "body", 
     helper: "clone" 
    }); 
    $("#catalog2").droppable({ 
     drop: function (event, ui) { 
      var content = ui.draggable.next(); 
      ui.draggable.draggable('disable').appendTo(this); 
      content.appendTo(this); 
      $("#catalog").accordion('destroy').accordion(); 
      $("#catalog2").accordion('destroy').accordion(); 
     } 
    }); 
}); 

所以我在做什么？

• 我正在初始化2手风琴，.accordion()。
• 我正在制作第一个手风琴draggable的标题。
• 我正在制作第二台手风琴droppable。

（我已经开始关闭上的代码是：http://jqueryui.com/droppable/#shopping-cart，你应该看看也行）

让我们来看看第二手风琴下降回调：

drop: function (event, ui) { 
    var content = ui.draggable.next(); 
    ui.draggable.draggable('disable').appendTo(this); 
    content.appendTo(this); 
    $("#catalog").accordion('destroy').accordion(); 
    $("#catalog2").accordion('destroy').accordion(); 
} 

这里发生的事情？

ui.draggable是此时拖动的jQuery包裹元素。我需要将它插入第二个手风琴。因此，我可以拨打ui.draggable.appendto(this)，但它仍然是可拖动的，所以我需要使其不可拖动。

我需要将内容与标题一起移动，因此我选择内容为：var content = ui.draggable.next()，然后将其移动到：content.appendTo(this);。 this仍然是可跌落的元素（第二手风琴）。

最后，我需要重新初始化手风琴，使要素承认，他们是：

$("#catalog").accordion('destroy').accordion(); 
$("#catalog2").accordion('destroy').accordion(); 

而且它的准备。

如果您想让项目可以前后拖动，您可能需要再编写一些代码。另外，如果你希望手风琴是可排序的，可拖放和排序似乎以有趣的方式相互作用，所以可能需要一些小试验。