Jquery Sortable inside other sortable: On sorting the element how to detect which sortable moved child or parent

Question

I am using jquery-ui sortable and I've got one sortable inside other! Point is when I'm trying to work with sortstop function, parent sortable runs as well(! Help me please!

<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

I have created a DEMO here

To identify whether the parent or child sortable element was moved, you can use the below code on sortstop event of the 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');
  }*/

});

Here is the complete code from the 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
});