JQuery UI Sortable - 如何在一個容器中對兩種類型的項目進行排序

Question

我想在同一個容器中對兩種類型的項目（不同的類名）進行排序。 每種類型的項目都應在其自身之間進行排序，而不會干擾其他項目類型。

我試試這個代碼：但它沒有用：

$('#myItemsContainer').sortable({
    items: '.sortType1',
    start: function(event, ui) {
    },
    change: function(event, ui) {
    },
    update: function(event, ui) {
    }
});

$('#myItemsContainer').sortable({
    items: '.sortType2',
    start: function(event, ui) {
    },
    change: function(event, ui) {
    },
    update: function(event, ui) {
    }
});

HTML：

<div id="myItemsContainer">

<div class="sortType1">Item Type 1</div>
<div class="sortType1">Item Type 1</div>
<div class="sortType1">Item Type 1</div>

<div class="sortType2">Item Type 2</div>
<div class="sortType2">Item Type 2</div>
<div class="sortType2">Item Type 2</div>

</div>

Answer 1

如前所述，您必須將它們包含在它們自己的容器中。 這是一個例子。

 $(function() { $("#myItemsContainer .list:eq(0)").sortable({ items: "> .sortType1" }); $("#myItemsContainer .list:eq(1)").sortable({ items: "> .sortType2" }); });

 #myItemsContainer { list-style-type: none; margin: 0; padding: 3px; width: 60%; border: 1px solid #000; } #myItemsContainer div[class^='sortType'] { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; border: 1px solid #CCC; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="myItemsContainer"> <div class="list"> <div class="sortType1">Item Type 1</div> <div class="sortType1">Item Type 1</div> <div class="sortType1">Item Type 1</div> </div> <div class="list"> <div class="sortType2">Item Type 2</div> <div class="sortType2">Item Type 2</div> <div class="sortType2">Item Type 2</div> </div> </div>

Answer 2

您可以通過更新sortable小部件的items選項來實現此類行為。 而且，您可以在鼠標懸停在項目上時更新它：

<div id="myItemsContainer">

    <div class="sortType1">Item Type 1</div>
    <div class="sortType1">Item Type 1</div>
    <div class="sortType1">Item Type 1</div>

    <div class="sortType2">Item Type 2</div>
    <div class="sortType2">Item Type 2</div>
    <div class="sortType2">Item Type 2</div>

</div>

$(function() {

    var elm = $('#myItemsContainer'); // cache for performance

    elm.sortable({
        items: '> .sortType1' // start with default selector
    }).on('mouseover', 'div', function(e) {

        if ($(e.currentTarget).hasClass('sortType1')) {
            // limit items to sortType1
            elm.sortable('option', 'items', '> .sortType1');
        } else {
            // limit items to sortType2
            elm.sortable('option', 'items', '> .sortType2');
        }
    });
});