admin管理员组

文章数量:1023138

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
    });

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
    });
  • javascript
  • jquery
  • jquery-ui
  • jquery-ui-sortable
  • nested-sortable
Share Improve this question edited Sep 5, 2018 at 6:49 Rahul Gupta 10.2k7 gold badges64 silver badges69 bronze badges asked Jan 24, 2018 at 23:28 Максим ЗайцевМаксим Зайцев 431 silver badge3 bronze badges 1
  • I think following link helps you jsfiddle/ali_soltani/g1sp060v/1. – Ali Soltani Commented Jan 26, 2018 at 4:45
Add a ment  | 

1 Answer 1

Reset to default 7

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 plete 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
});

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
    });

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
    });
  • javascript
  • jquery
  • jquery-ui
  • jquery-ui-sortable
  • nested-sortable
Share Improve this question edited Sep 5, 2018 at 6:49 Rahul Gupta 10.2k7 gold badges64 silver badges69 bronze badges asked Jan 24, 2018 at 23:28 Максим ЗайцевМаксим Зайцев 431 silver badge3 bronze badges 1
  • I think following link helps you jsfiddle/ali_soltani/g1sp060v/1. – Ali Soltani Commented Jan 26, 2018 at 4:45
Add a ment  | 

1 Answer 1

Reset to default 7

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 plete 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
});

本文标签：

版权声明：本文标题：javascript - Jquery Sortable inside other sortable: On sorting the element how to detect which sortable moved child or parent - 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745526392a2154542.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。