將jquery手風琴元素從一個手風琴移動到另一個

Question

這是一個奇怪的位。我有兩個jQuery手風琴實體，在單手風琴中單擊一個項目時，我想動態地將它添加到第二個手風琴中，並將其隱藏在原始手風琴中。

目前這項工作很好地從A移到B，並從B移回A，但是當我將一個項目移回到原來的手風琴時，從A到B的任何後續移動都搞砸了。

這裏是一個jsfiddle的例子，我的意思是http://jsfiddle.net/waveydavey/CAYth/。注意我強烈意識到代碼很難看 - 我只是在學習這些東西。請隨時提出更好的方法。請執行以下操作：

• 運行小提琴。
• 點擊每個項目的「+」號可以移動到手風琴2
• 一切都很好。

現在做到這一點：

• 運行小提琴。
• 單擊任一「+」移動到第二個手風琴
• 點擊「X」上移動的項目，它重新出現在第一組
• 單擊任一「+」項添加到第二組
• 手風琴項目顯示完全混亂

任何意見將大規模讚賞。

的的jsfiddle代碼：

$(function() { 
// create accordion entities 
$('#avAccordion').accordion({ 
     collapsible: true, 
     autoHeight: false, 
     active: false 
    }); 
$('#assignedAccordion').accordion({ 
     collapsible: true, 
     autoHeight: false, 
     active: false 
    }); 
$('.accordionAdd').click(function(){ 
     // destroy the accordion, prior to rebuilding 
     $('#avAccordion').accordion('destroy'); 
     // get the h3 part and tweak it's contents 
     var h3bit = $(this).parent().clone(); 
     $(h3bit).removeClass('freeContacts').addClass('assignedContacts'); 
     $(h3bit).children('span').removeClass('ui-icon-circle-plus accordionAdd').addClass('ui-icon-circle-close accordionDel'); 
     // get the div part after the h3 
     var divbit = $(this).parent().next().clone(); 
     // rebuild original accordion 
     $("#avAccordion").accordion({ 
      collapsible: true, 
      autoHeight: false, 
      active: false 
     }); 
     // move contents to other accordion 
    $('#assignedAccordion').append(h3bit) 
     .append(divbit) 
     .accordion('destroy') 
     .accordion({ 
      collapsible: true, 
      autoHeight: false, 
      active: false 
     }); 
     // hide original accordion entry 
     $(this).parent().hide(); 
     //attach click handler to new item 
     $('.accordionDel').click(function(){ 
      dropAssignedContact(this); 
      return false; 
     }) 
     return false; 
    }); 

    function dropAssignedContact(obj){ 
     // unhide right hand object with appropriate data-id attr 
     var id = $(obj).parent().attr('data-id'); 
     // delete myself 
     $(obj).parent().remove(); 
     // unhide original 
     $('.freeContacts[data-id='+id+']').show(); 
     $('#assignedAccordion').accordion('destroy').accordion({ 
      collapsible: true, 
      autoHeight: false, 
      active: false 
     }); 
    } 
}); 

Answer 1

看到這個更新小提琴：http://jsfiddle.net/KTWEd/

function dropAssignedContact(obj){ 
    // unhide right hand object with appropriate data-id attr 
    var id = $(obj).parent().attr('data-id'); 

    // delete myself 
    $(obj).parent().next().remove(); // <--- Removes the adjacent div 
    $(obj).parent().remove(); 

    // unhide original 
    $('.freeContacts[data-id='+id+']').show(); 
    $('#assignedAccordion').accordion('destroy').accordion({ 
     collapsible: true, 
     autoHeight: false, 
     active: false 
    }); 
} 
});