Jquery UI sorting multiple table row at once

Question

I have a problem with jqueryui sorting.

Now i have a table with sorting on tr and it\'s all working, but now i have to sort 2 row at once. In the example below i have to

Answer 1

I found that this was more difficult than I anticipated, so I took a stab at it. I forked your fiddle and made some updates.

Working Example: https://jsfiddle.net/Twisty/n29ekt42/13/

I added a handle column.

HTML

...
Lots of CSS, if you like.
CSS
table {
  border-collapse: collapse;
}

table thead tr {
  margin-left: 20px;
}

table tbody tr {
  border: 1px solid #ccc;
}

tr.ui-selecting {
  background: #FECA40;
}

tr.ui-selected {
  background: #F39814;
  color: white;
}

.hidden {
  display: none;
}
jQuery
function assignSortAttach() {
  $("table tbody").sortable({
      axis: "y",
      cursor: "grabbing",
      handle: ".handle",
      opacity: 0.6,
      helper: function(e, item) {
        console.log("Parent-Helper: ", item);
        if (!item.hasClass("ui-selected")) {
          item.addClass("ui-selected");
        }
        // Clone selected elements
        var elements = $(".ui-selected").not('.ui-sortable-placeholder').clone();
        console.log("Making helper: ", elements);
        // Hide selected Elements
        item.siblings(".ui-selected").addClass("hidden");
        var helper = $("

  

    

      

      
T1
      
T1
      
T1
    
  
  

    

      

      
G1
      
G1
      
G1
    









");
        helper.append(elements);
        console.log("Helper: ", helper);
        return helper;
      },
      start: function(e, ui) {
        var elements = ui.item.siblings(".ui-selected.hidden").not('.ui-sortable-placeholder');
        ui.item.data("items", elements);
      },
      update: function(e, ui) {
        console.log("Receiving: ", ui.item.data("items"));
        $.each(ui.item.data("items"), function(k, v) {
          console.log("Appending ", v, " before ", ui.item);
          ui.item.before(v);
        });
      },
      stop: function(e, ui) {
        ui.item.siblings(".ui-selected").removeClass("hidden");
        $("tr.ui-selected").removeClass("ui-selected");
      }
    })
    .selectable({
      filter: "tr",
      cancel: ".handle"
    })
}

$(function() {
  assignSortAttach();
});
This is adapted from the code here: jQuery Sortable - drag and drop multiple items and here: jQuery UI sortable & selectable
Credit for using Sort and Select together goes to mhu. This works really well, since you can drag-select or CTRL+Click to select the Rows as you like. You can drag and select a group or click unqiue items that will group ion the drag. Then using the drag handle, the user can sort the selected rows. 
TJ gives us the ability to sort multiple items. His Demo is designed to move elements between separate lists, so I switched events receive with update.
From flippant comment to an answer, I hope that helps.
Updates after Comments
Working example: https://jsfiddle.net/Twisty/Lbu7ytbj/
I change the HTML to group the rows:

  

    

      
 
      
T1
      
T1
      
T1
    
  
  

    

      

      
G1
      
G1
      
G1
    
    

      
G1
      
G1
      
G1
    
    
    

    

      

      
G2
      
G2
      
G2
    
    

      
G2
      
G2
      
G2
    
    
    

    

      

      
G3
      
G3
      
G3
    
    

      
G3
      
G3
      
G3
    
  

Now all I had to do was adjust the sortable to use the table and not use the thead.

function assignSortAttach() {
  $("table").sortable({
    axis: "y",
    cursor: "grabbing",
    handle: ".handle",
    cancel: "thead",
    opacity: 0.6,
    placeholder: "two-place",
    helper: function(e, item) {
      if (!item.hasClass("selected")) {
        item.addClass("selected");
      }
      console.log("Selected: ", $(".selected"));
      var elements = $(".selected").not(".ui-sortable-placeholder").clone();
      console.log("Making helper from: ", elements);
      // Hide selected Elements
      $(".selected").not(".ui-sortable-placeholder").addClass("hidden");
      var helper = $("");
      helper.append(elements);
      console.log("Helper: ", helper);
      return helper;
    },
    start: function(e, ui) {
      var elements = $(".selected.hidden").not('.ui-sortable-placeholder');
      console.log("Start: ", elements);
      ui.item.data("items", elements);
    },
    update: function(e, ui) {
      console.log("Receiving: ", ui.item.data("items"));
      ui.item.before(ui.item.data("items")[1], ui.item.data("items")[0]);
    },
    stop: function(e, ui) {
      $('.selected.hidden').not('.ui-sortable-placeholder').removeClass('hidden');
      $('.selected').removeClass('selected');
    }
  });
}

$(function() {
  assignSortAttach();
  $(".handle").attr("title", "Use me to drag and sort.");
});
I also added CSS for the placeholder:
.two-place {
  display: block;
  visibility: visible;
  height: 2.5em;
  width: 0;
}

.two-place::after {
  content: "";
  border: 1px dashed #ccc;
  float: left;
  background-color: #eee;
  height: 2.5em;
  width: 100px;
}

                                                        

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                    

                    



               
            

    发布评论:
    

         
                        
    
    
提交评论 
  
  

                    
                    

                    

                        

                        
                         加载中...
                        
                    
                

          

            
            

              
              

            
    


                                 
              
            
                          
    

        
         

                验证码
                

                  
                
                

                   看不清?
                
              
                                  

                    
   
                 
             
              
提交回复
            
          
        

          
 
     
 

        
热议问题