Jquery Sortable inside other sortable：在对元素进行排序时如何检测哪个可排序的子元素或父元素

Question

我正在使用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
    });

Answer 1

我在这里创建了DEMO

要确定parent 或child 可排序元素是否被移动，您可以在parent 的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');
  }*/

});

这是来自 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
});