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

Question

我正在使用 jquery-ui sortable 并且我有一个 sortable inside other!重点是当我尝试使用 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 可排序元素是否已移动，您可以在 的 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
});