[英]JQuery UI Sortable - How to sort two types of items in one container
I want to sort two types of items (different class name) in same container.我想在同一个容器中对两种类型的项目(不同的类名)进行排序。 Each type of items should be sorted between itself without interfere the other items type.
每种类型的项目都应在其自身之间进行排序,而不会干扰其他项目类型。
I try this code: but it didn't work:我试试这个代码:但它没有用:
$('#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: 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>
As mentioned, you must contain them in their own container.如前所述,您必须将它们包含在它们自己的容器中。 Here is an example.
这是一个例子。
$(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>
You can achieve such behavior by updating items
option of sortable
widget.您可以通过更新
sortable
小部件的items
选项来实现此类行为。 And, you can update it on mouseover on the 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');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.