Question

我正在使用sortable（）在2个列表之间移动项目并更改排序顺序。我要做的是在每个项目旁边添加一个图标，单击该图标时将项目发送到另一个列表。这是我迄今为止所拥有的，并且无法追踪我需要的方法。下面的代码成功地将正确的图标添加到元素（添加和删除图标），但现在我需要为图标分配一个点击事件。

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

jQuery UI可排序的connectWith还原图标

1 个答案: