jquery drag multiple table rows with sortable

Question

i have 2 tables and i need to select some rows from one, then drop them to the other table in the position i want to place. i can drag multiple rows, but they will be placed on the end of table..i need to place where i want.

i tried with this

$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
      helper: function(){
          var selected = $('.childgrid tr.selectedRow');
        if (selected.length === 0) {
          selected = $(this).addClass('selectedRow');
        }
        var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone().removeClass("selectedRow"));
    return container;
      }
 });

http://jsfiddle.net/83k9k/5/

but i can't apply the sortable. here i tried to apply sortable, but i can't apply the selected rows.

$("#table1 .childgrid, #table2 .childgrid").sortable({
                    connectWith: ".childgrid",
                    //connectWith: ".t_sortable",
                    items: $(".draggable_tr"),
                    //items: "> tr:not(:first)",
                    appendTo: $tabs,
                    //helper:"clone",
                    zIndex: 999990,
                    helper: function(){
                      var selected = $('.childgrid tr.selectedRow');
                      if (selected.length === 0) {
                        selected = $(this).toggleClass('selectedRow');
                      }
                        console.log(selected.length)
                      var container = $('<div/>').attr('id', 'draggingContainer');
                      //console.log(container)
                      container.append(selected.clone().removeClass("selectedRow"));
                      return container;
                  },                  
                  update: function (event, ui)
                  {
                    $(this).append(ui.helper.children());
                    $('.selectedRow').remove();
                  }
                }).disableSelection();

http://jsfiddle.net/ce36vd0h/

where is the issue?

Hi, can you elaborate more on your issue ? what doesn't work ? — Swati

A Paul A Paul · Accepted Answer · 2021-01-18T07:15:59

Please check below. I have made some changes. THe problem I see is , you are dragging inside a table, so you do not get which tr you are dragging after . I have made below changes. I have added a class tt1 in every table row on the right side table. And then called the droppable in the table row instead of the table itself. You can do the same for the left table. This just show the example. I am not sure if this goes with your actual usecase but I feel this is the best way to identify the table row where you are dropping. I am not sure about the sortable, are you trying to apply sortable after the row is moved ?

http://jsfiddle.net/2gb7vcLf/

$("#table1 .childgrid, #table2 .tt1").droppable({
    drop: function (event, ui) {
  // alert($(this).hasClass('childgrid'))
    //alert($(this).closest('tr').hasClass('draggable_tr'))
   var droppedRow = $(this).closest('tr');
   // $(droppedRow).css('color', 'red');
    $(ui.helper.children()).insertAfter(droppedRow);
    
   // $(droppedRow).next(ui.helper.children());
    
    //$(this).append(ui.helper.children());
    $('.selectedRow').remove();
    }
});


<tr class="draggable_tr tt1">

jquery drag multiple table rows with sortable

1 Answers