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() {&nbsp; $("#myItemsContainer .list:eq(0)").sortable({&nbsp; &nbsp; items: "> .sortType1"&nbsp; });&nbsp; $("#myItemsContainer .list:eq(1)").sortable({&nbsp; &nbsp; items: "> .sortType2"&nbsp; });});#myItemsContainer {&nbsp; list-style-type: none;&nbsp; margin: 0;&nbsp; padding: 3px;&nbsp; width: 60%;&nbsp; border: 1px solid #000;}#myItemsContainer div[class^='sortType'] {&nbsp; margin: 0 3px 3px 3px;&nbsp; padding: 0.4em;&nbsp; padding-left: 1.5em;&nbsp; font-size: 1.4em;&nbsp; height: 18px;&nbsp; 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">&nbsp; <div class="list">&nbsp; &nbsp; <div class="sortType1">Item Type 1</div>&nbsp; &nbsp; <div class="sortType1">Item Type 1</div>&nbsp; &nbsp; <div class="sortType1">Item Type 1</div>&nbsp; </div>&nbsp; <div class="list">&nbsp; &nbsp; <div class="sortType2">Item Type 2</div>&nbsp; &nbsp; <div class="sortType2">Item Type 2</div>&nbsp; &nbsp; <div class="sortType2">Item Type 2</div>&nbsp; </div></div>

Answer 2

您可以通过更新小部件items的选项来实现这种行为sortable。并且，您可以在鼠标悬停在项目上时更新它：<div id="myItemsContainer">&nbsp; &nbsp; <div class="sortType1">Item Type 1</div>&nbsp; &nbsp; <div class="sortType1">Item Type 1</div>&nbsp; &nbsp; <div class="sortType1">Item Type 1</div>&nbsp; &nbsp; <div class="sortType2">Item Type 2</div>&nbsp; &nbsp; <div class="sortType2">Item Type 2</div>&nbsp; &nbsp; <div class="sortType2">Item Type 2</div></div>$(function() {&nbsp; &nbsp; var elm = $('#myItemsContainer'); // cache for performance&nbsp; &nbsp; elm.sortable({&nbsp; &nbsp; &nbsp; &nbsp; items: '> .sortType1' // start with default selector&nbsp; &nbsp; }).on('mouseover', 'div', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; if ($(e.currentTarget).hasClass('sortType1')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // limit items to sortType1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elm.sortable('option', 'items', '> .sortType1');&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // limit items to sortType2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elm.sortable('option', 'items', '> .sortType2');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});