jQuery UI可排序连接与还原图标

我使用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');
});

---

但似乎效果不错。有什么理由我不应该使用这种方法吗？我找不到任何东西可以手动将可排序的项目移动到另一个connectWith容器。

在发布我自己的答案时，我担心在不通知插件的情况下手动移动列表中的项目会产生不利影响，但此解决方案没有任何问题

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

---

您编辑的解决方案在我看来很好，我看不出有任何问题。

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