jQuery UI可排序connectWith還原圖標

我使用sortable（）在兩個列表之間移動項目並更改排序順序。我想要做的是在每個項目旁邊添加一個圖標，點擊時將項目發送到另一個列表。這是我目前爲止的內容，並且無法追蹤我需要的方法。下面的代碼成功地將正確的圖標添加到元素（添加&刪除圖標），但現在我需要爲圖標指定一個單擊事件。jQuery UI可排序connectWith還原圖標

<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容器。

來源

2013-12-17 Syon

您編輯的解決方案對我來說看起來很好，我看不到任何問題。 – Swires

發佈我自己的答案時，我擔心手動移動列表中的項目而不通知插件會產生不利影響，但對此解決方案沒有任何問題。

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

來源

2013-12-26 19:31:19 Syon

jQuery UI可排序connectWith還原圖標

回答

相關問題