我可以將一個項目從一個手風琴拖到另一個手風琴嗎？

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

而且它的準備。

如果您想讓項目可以前後拖動，您可能需要再編寫一些代碼。另外，如果你希望手風琴是可排序的，可拖放和排序似乎以有趣的方式相互作用，所以可能需要一些小試驗。