将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 
    }); 
} 
});