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

问题描述 投票:0回答:1

我想在同一个容器中对两种类型的项目(不同的类名)进行排序。每种项目类型应在它们之间进行排序,而不会干扰其他项目类型。

我尝试了此代码:但是没有用:

$('#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>
javascript jquery html jquery-ui jquery-ui-sortable
1个回答
0
投票

如上所述,您必须将它们包含在自己的容器中。这是一个例子。

$(function() {
  $("#myItemsContainer .list:eq(0)").sortable({
    items: "> .sortType1"
  });
  $("#myItemsContainer .list:eq(1)").sortable({
    items: "> .sortType2"
  });
});
#myItemsContainer {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#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>
© www.soinside.com 2019 - 2024. All rights reserved.