Jquery Sortable inside other sortable: 在对元素进行排序时如何检测哪个 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
});

Jquery Sortable inside other sortable: 在对元素进行排序时如何检测哪个 sortable 移动了子元素或父元素

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

javascript

jquery

jquery-ui

jquery-ui-sortable

nested-sortable