我想在同一个容器中对两种类型的项目(不同的类名)进行排序。每种项目类型应在它们之间进行排序,而不会干扰其他项目类型。
我尝试了此代码:但是没有用:
$('#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>
如上所述,您必须将它们包含在自己的容器中。这是一个例子。
$(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>