jQuery UI Sortable connect with return icon

Question

2 개의 목록간에 항목을 이동하고 정렬 순서를 변경하려면 sortable()을 사용하고 있습니다. 내가하려고하는 것은 클릭 할 때 다른 목록으로 항목을 보내는 각 항목 옆에 아이콘을 추가하는 것입니다. 여기까지 내가 지금까지 가지고 있으며 필요한 방법을 추적 할 수 없었습니다. 아래 코드는 요소에 올바른 아이콘을 추가하지만 (& 아이콘 제거) 아이콘에 클릭 이벤트를 할당해야합니다.

<ul class="sortable-list" id="availableColumns"> 
    <li>Apple <a href="#" class="sort-icon sort-add">Add</a></li> 
    <li>Orange <a href="#" class="sort-icon sort-add">Add</a></li> 
    <li>Banana <a href="#" class="sort-icon sort-add">Add</a></li> 
</ul> 

<ul class="sortable-list" id="defaultColumns"> 
    <li>Grapefruit <a href="#" class="sort-icon sort-remove">Remove</a></li> 
</ul> 

$('.sortable-list').sortable({ 
    cancel: false, 
    connectWith: '.sortable-list', 
    update: function(event, ui) { 
     if (ui.sender && $(ui.sender).attr('id') == 'availableColumns'){ 
      $(ui.item).find('.sort-icon').remove().end().append(closeIcon); 
     } else if (ui.sender && $(ui.sender).attr('id') == 'defaultColumns'){ 
      $(ui.item).find('.sort-icon').remove().end().prepend(addIcon); 
     } 
    } 
}); 

$('body').on('click.sortable-remove', '.sort-remove', function(e){ 
    e.preventDefault(); 
    console.log('REMOVE - move item to #availableColumns'); 
}); 
$('body').on('click.sortable-add', '.sort-add', function(e){ 
    e.preventDefault(); 
    console.log('ADD - move item to #defaultColumns'); 
}); 

====== 편집 나는 그것만큼 쉬운 일이 아니었다 가정 어떤 이유 ========

:

$('#defaultColumns').find('li:first').appendTo('#availableColumns'); 

그러나 그것은 나타납니다 잘 작동합니다. 왜 내가이 방법을 사용하지 않아야하는 이유가 있습니까? 정렬 가능한 항목을 다른 connectWith 컨테이너로 수동으로 이동하는 방법을 찾지 못했습니다.

Answer 1

내 답변을 게시 할 때 플러그인에 알리지 않고 수동으로 목록에서 항목을 이동하면 불리한 영향을 미치지 만이 해결 방법에는 문제가 없었습니다.

$('#defaultColumns').find('li:first').appendTo('#availableColumns');