將jQuery可排序列表分爲兩列？

-1

我期待有一個jQuery列表自動分類到兩個相同大小的列加載。將jQuery可排序列表分爲兩列？

無法弄清楚如何讓它正常工作 - 使用'分割列表'功能不適用於可排序的插件。

如何獲得五個像這樣的列表分裂爲兩個和三個兩列，其中當項目之間拖在它autoupdated任何想法？

<ul id="sortable" class="split-list"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul>

來源

2014-10-19 user2512696

*「得到這樣的五個列表，將其分成兩列，兩列，三列，它是自動填充的」* - 那麼第五個列表會發生什麼......？新的'HTML'應該如何？什麼時候/如何得到autoupdated ..？什麼是*分割列表*功能..？從來沒有聽說過。你可以給任何參考..？ – 2014-10-21 17:03:30

如果我理解正確的話，你可以使用slice()方法來檢索一組元素，用wrapAll()包裝在一個新的<ul>和使用insertAfter()最後<ul>後插入，如下圖所示：

$(split); 
 

 
function split() { 
 
    var listItems = document.querySelectorAll("ul li"); 
 
    for (var i = 2; i < listItems.length; i += 2) { 
 
    $(listItems).slice(i, i + 2).insertAfter("ul:last").wrapAll($("<ul/>", { 
 
     class: "sortable connectedSortable" 
 
    })); 
 
    } 
 
    $(".sortable").sortable({ 
 
    connectWith: ".connectedSortable" 
 
    }).disableSelection() 
 
}

ul { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<ul class="sortable connectedSortable split-list"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
</ul>

每當列表被更新，再次調用split()功能。

來源

2014-10-21 18:37:31

將jQuery可排序列表分爲兩列？

回答

相關問題