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

您可以通过更新小部件items的选项来实现这种行为sortable。并且，您可以在鼠标悬停在项目上时更新它：

<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');

        }

    });

});