JQuery UI Sortable - 如何在一个容器中对两种类型的项目进行排序答案

【问题标题】：JQuery UI Sortable - How to sort two types of items in one containerJQuery UI Sortable - 如何在一个容器中对两种类型的项目进行排序
【发布时间】：2020-06-29 01:23:39
【问题描述】：

我想在同一个容器中对两种类型的项目（不同的类名）进行排序。每种类型的项目都应在其自身之间进行排序，而不会干扰其他项目类型。

我尝试了这段代码：但它不起作用：

$('#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>

【问题讨论】：

欢迎来到 Stack Overflow。这根本不符合逻辑。由于所有项目都在同一个容器中，因此它们基本上是一起列出的。如果您不希望将它们排序在一起，则应考虑将它们移至各自的容器中。
@Twisty 谢谢你的回复。现在，我尝试使用 mouseOver 事件一个项目类型。因此，如果元素是项目类型 1，我调用项目类型 1 的可排序函数并销毁项目类型 2 的可排序（反之亦然）。这样容器仍然是相同的，我可以使用多种类型，而不仅仅是 2 种类型。但我希望有另一种官方方式。
您实际上是在使用一组新选项重新初始化 Sortable，因此无法在同一个容器上执行此操作。

标签： javascript jquery html jquery-ui jquery-ui-sortable

【解决方案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>

【讨论】：

【解决方案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');
        }
    });
});

【讨论】：