Javascript Jquery Sortable in other Sortable:对元素排序时如何检测哪个排序表移动了子级或父级
我使用的是Javascript Jquery Sortable in other Sortable:对元素排序时如何检测哪个排序表移动了子级或父级,javascript,jquery,jquery-ui,jquery-ui-sortable,nested-sortable,Javascript,Jquery,Jquery Ui,Jquery Ui Sortable,Nested Sortable,我使用的是jqueryui-sortable,我在另一个里面有一个排序表!关键是当我尝试使用sortstop函数时,parent sortable也会运行(!请帮帮我 <div class="sortable1"> <div class="s1"> <div class="sortable2"> <div class="s2"></div> <div class="s2"></d
jqueryui-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>
我在这里创建了一个
要确定是否移动了父级或子级可排序元素,您可以在父级sortstop事件中使用以下代码
$(".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');
}*/
});
以下是演示中的完整代码:
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>
$(".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
});
我想下面的链接对你有帮助。谢谢你!太好了!
$(".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
});