jQuery互換項目與連接列表

我正在使用默認的jQueryUI連接可排序列表。但我需要一些（據我所知）不是默認功能。我希望這裏有人知道一個簡單的方法來完成我想要的東西（也許用一個插件？）。我無法找到任何直接的解決方案。jQuery互換項目與連接列表

就像我說的，我是用默認的工作連接排序：http://jsfiddle.net/KLvdn/

這一切工作。我可以將項目從一個列表拖放到另一個列表中。但我真正想要的是能夠從一個列表拖動一個項目，將其放在另一個列表中的另一個項目的頂部並使它們交換。

所以在步驟中;

我拖「項目1」，從左邊的列表
我將其拖放到「第3項」從右側列表
「項目1」將被定位在「項目3」的地方
「Item3」將被移動到「Item 1」所在位置的左側列表中。

這是否已經可以以某種方式？

我的解決方案

這是我做的最後。

我需要一種方法從另一個列表中的項目頂部的一個列表中刪除項目。丟棄時，它下面的項目應該自動放入另一個列表中。因此，將這兩個物品放在一起。

首先，我增加了三個屬性，以我的連接列表：

var _index = null; 
$("#field-mylist, #test-mylist").sortable({ 
    connectWith: ".mylist", 
    placeholder: 'ui-placeholder', // <-- VERY IMPORTANT 
    change: function (event, ui) { 
     markForReplacement('mylist', ui); 
    }, 
    update: function (event, ui) { 
     updateConnectedLists('mylist'); 
    } 
}).disableSelection();

這是由變化和更新事件調用了兩個函數：

function markForReplacement(position, ui) { 
    var total = 0; 
    $('#field-' + position + ' .player').each(function (index) { 
     $(this).removeClass("selected-item"); 
     total++; 
    }); 

    var index = ui.placeholder.index(); 
    if (total < (index + 2)) { 
     $('#field-' + position + ' div:eq(' + (index - 1) + ')').addClass("selected-item"); 
     _index = (index - 1); 
    } else { 
     $('#field-' + position + ' div:nth-child(' + (index + 2) + ')').addClass("selected-item"); 
     _index = (index + 2); 

    } 
} 

function updateConnectedLists(position) { 
    if (_index === null) 
     return; 

    $('#field-' + position + ' div:nth-child(' + (_index) + ')').insertAfter($("#test-" + position + " .player")); 
    _index = null; 

    // Reset class styles 
    $('#test-' + position + ' .player').each(function (index) { 
     $(this).removeClass("selected-item"); 
    }); 

    $('#test-' + position).sortable('refresh'); 
}

一個更重要的事情添加如下CSS樣式：

.ui-placeholder { 
    float: left; 
} 

.selected-item{ 
    border-color: #FF6600 !important; 
}

With ui-placeholder實際上，您可以將項目放置在另一個項目的頂部（釋放它之前）。 。選中的項目類給將要移動到另一個列表的元素提供邊框（所以下層項目）。

來源

2012-06-05 w00

你可以查看這個插件的swap，雖然在線演示似乎是關閉的。

聲明我自己並沒有嘗試過這個插件。

這個帖子在SO是在同一條線上。

This也可以得到移動元素的索引。

來源

2012-06-05 10:29:20 mprabhat

我發現了一個，也注意到它不再工作。我實際上認爲它已經過時或什麼。但無論如何，我會試一試。也許它仍然有效。 – w00

希望它適合你，也更新了我的帖子與類似的職位關於交換 – mprabhat

「交換」插件畢竟不適用於我。我需要更多的習慣。但我終於搞定了。我使用了您提供的其中一個鏈接中的一些代碼。所以我只是把你的答案標記爲最好，因爲你確實幫助過我:-) ---我也會嘗試編輯我的開場白並添加我所做的。也許這對未來的其他人會有幫助。 – w00

jQuery互換項目與連接列表

回答

相關問題