我正在使用jquery-ui sortable
,我在其他内部有一个可排序的!点是当我尝试使用sortstop
功能时,parent sortable
也运行(请帮帮我!
<div class="sortable1">
<div class="s1">
<div class="sortable2">
<div class="s2"></div>
<div class="s2"></div>
<div class="s2"></div>
<div class="s2"></div>
</div>
</div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
<div class="s1"></div>
JS:
//parents
$( ".sortable1" ).sortable({
items: ".s1"
});
$( ".sortable1" ).disableSelection();
$( ".sortable1" ).on( "sortstop", function( event, ui ){
//do sort of parents
});
//children
$( ".sortable2" ).sortable({
items: ".s2"
});
$( ".sortable2" ).disableSelection();
$( ".sortable2" ).on( "sortstop", function( event, ui ){
//do sort of childrens
});
我在这里创建了一个DEMO
要确定是否移动了parent
或child
可排序元素,您可以在sortstop
的parent
事件中使用以下代码
$(".sortable1").on("sortstop", function(event, ui) {
alert('sortstop parents');
console.log('sortstop parents Event = ', event, ' ui = ', ui);
console.log(ui.item);
if ($(ui.item).hasClass('s1')) {
alert('it is Parent element that just moved. In here you can do the things specific to Parent sortable elements');
}
/*else {
console.log('it is child');
}*/
});
以下是DEMO的完整代码:
HTML:
<h3>Sortable inside the other sortable</h3>
<div class="sortable1" style="border:0px solid;height:auto;">
<div class="s1">1
<div class="sortable2" style="height:auto;margin:0 0 0 20px;">
<div class="s2">1.1</div>
<div class="s2">1.2</div>
<div class="s2">1.3</div>
<div class="s2">1.4</div>
</div>
</div>
<div class="s1">2</div>
<div class="s1">3</div>
<div class="s1">4</div>
<div class="s1">5</div>
</div>
JS:
$(".sortable1").sortable({
items: ".s1"
});
$(".sortable1").disableSelection();
$(".sortable1").on("sortstop", function(event, ui) {
alert('sortstop parents');
console.log('sortstop parents Event = ', event, ' ui = ', ui);
console.log(ui.item);
if ($(ui.item).hasClass('s1')) {
alert('it is Parent element that just moved. In here you can do the things specific to Parent sortable elements');
}
/*else {
console.log('it is child');
}*/
});
//children
$(".sortable2").sortable({
items: ".s2"
});
$(".sortable2").disableSelection();
$(".sortable2").on("sortstop", function(event, ui) {
alert('sortstop children');
console.log('sortstop children Event = ', event, ' ui = ', ui);
//do sort of childrens
});