Могу ли я перетащить предмет из одного аккордеона в другой?

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

И он готов.

Если вы хотите, чтобы элементы перетаскивались вперед и назад, вам может потребоваться код немного больше. Также, если вы хотите, чтобы аккордеоны были сортируемыми, droppable и sortable, похоже, взаимодействуют смешными способами, поэтому может потребоваться небольшое экспериментирование.