從一個表格拖放多行到另一個表格

Question

我需要通過從表格中選擇所需的行到另一個表格來拖放表格行。首先提供從一個表中選擇需要的行的選項，然後所有選定的行都需要拖放到其他表中。

我已經完成了從表上拖放單行到另一個表的示例。找到下面的代碼：

HTML：

<div id="table1" class="bitacoratable"> 
    <table> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>ClassName</th> 
      </tr> 
     </thead> 
     <tbody> 
       <tr> 
        <td>1</td> 
        <td>Class 1</td> 
       </tr> 
       <tr class="childrow"> 
        <td collspan = "2" > 
         <table class="childgrid"> 
           <tr class="draggable_tr"> 
            <td>1</td> 
            <td>Student 1</td>            
           </tr> 
           <tr class="draggable_tr"> 
            <td>2</td> 
            <td>Student 2</td>                    
           </tr>  
           <tr class="draggable_tr"> 
            <td>3</td> 
            <td>Student 3</td>                    
           </tr> 
           <tr class="draggable_tr"> 
            <td>4</td> 
            <td>Student 4</td>                    
           </tr> 
           <tr class="draggable_tr"> 
            <td>5</td> 
            <td>Student 5</td>                    
           </tr>        
         </table> 
        </td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>Class 2</td> 
       </tr> 
       <tr class="childrow"> 
        <td collspan = "2"> 
         <table class="childgrid"> 
           <tr class="draggable_tr"> 
            <td>6</td> 
            <td>Student 6</td>            
           </tr> 
           <tr class="draggable_tr"> 
            <td>7</td> 
            <td>Student 7</td>                    
           </tr>  
           <tr class="draggable_tr"> 
            <td>8</td> 
            <td>Student 8</td>                    
           </tr> 
           <tr class="draggable_tr"> 
            <td>9</td> 
            <td>Student 9</td>                    
           </tr> 
           <tr class="draggable_tr"> 
            <td>10</td> 
            <td>Student 10</td>                    
           </tr> 
         </table> 
        </td> 
       </tr>    
     </tbody> 
    </table> 
</div> 

<div id="table2" class="bitacoratable"> 
    <table> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>ClassName</th> 
      </tr> 
     </thead> 
     <tbody> 
       <tr> 
        <td>1</td> 
        <td>Class 1</td> 
       </tr> 
       <tr class="childrow"> 
        <td> 
         <table class="childgrid"> 
           <tr class="draggable_tr"> 
            <td>1</td> 
            <td>Student 1</td>            
           </tr> 
           <tr class="draggable_tr"> 
            <td>2</td> 
            <td>Student 2</td>                    
           </tr>  
           <tr class="draggable_tr"> 
            <td>3</td> 
            <td>Student 3</td>                    
           </tr> 
           <tr class="draggable_tr"> 
            <td>4</td> 
            <td>Student 4</td>                    
           </tr> 
           <tr class="draggable_tr"> 
            <td>5</td> 
            <td>Student 5</td>                    
           </tr>        
         </table> 
        </td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>Class 2</td> 
       </tr> 
       <tr class="childrow"> 
        <td> 
         <table class="childgrid"> 
           <tr class="draggable_tr"> 
            <td>6</td> 
            <td>Student 6</td>            
           </tr> 
           <tr class="draggable_tr"> 
            <td>7</td> 
            <td>Student 7</td>                    
           </tr>  
           <tr class="draggable_tr"> 
            <td>8</td> 
            <td>Student 8</td>                    
           </tr> 
           <tr class="draggable_tr"> 
            <td>9</td> 
            <td>Student 9</td>                    
           </tr> 
           <tr class="draggable_tr"> 
            <td>10</td> 
            <td>Student 10</td>                    
           </tr> 
         </table> 
        </td> 
       </tr>    
     </tbody> 
    </table> 
</div> 

腳本：

$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({ 
     helper: 'clone', 
     revert: 'invalid', 
     start: function (event, ui) { 
      $(this).css('opacity', '.5'); 
      }, 
     stop: function (event, ui) { 
      $(this).css('opacity', '1'); 
     } 
}); 

$("#table1 .childgrid, #table2 .childgrid").droppable({ 
    drop: function (event, ui) { 
    $(ui.draggable).appendTo(this); 
    } 
}); 

$(document).on("click", ".childgrid tr", function() { 
    $(this).addClass("selectedRow"); 
}); 

CSS：

table 
{ 
border-collapse:collapse; 
} 
table, td, th 
{ 
border:1px solid black; 
} 
     .bitacoratable { 
      height: 400px; 
      overflow-y: auto; 
      width: 220px; 
      float:left; 
     } 
     #table1 { 
      margin-right: 100px; 
     } 
     .selectedRow { 
      background-color: #E7E7E7; 
      cursor: move; 
     } 

如何做到這一點的mutilple行？

Regards， Karthik。

Answer 1

您可以使用draggable的輔助函數。有一個很好的實現here。

這裏是它的外觀使用上述爲您的特定代碼的準則：

JsFiddle Demonstration:

這是怎麼回事的說明：

（1）如果只有一個選擇有，然後我們」我會把它當作一次拖放。因爲它沒有被點擊（鼠標按住並拖動鼠標），我們將手動添加selectedRow類以確保它從原始位置正確移除。 （2）製作一個臨時容器，將所有行存儲爲一個單元，就像我們拖動一個項目一樣。

var container = $('<div/>').attr('id', 'draggingContainer'); 
container.append(selected.clone().removeClass("selectedRow")); 
return container; 

（3）您可以修改CSS，以便在顯示移動光標前始終單擊項目。我已經做了，但隨時可以隨意更改它，只要你喜歡。 （4）現在，我們將臨時分隔線中的所有表格行添加到我們選擇放入並刪除最初選定的所有元素的.childgrid中。

$("#table1 .childgrid, #table2 .childgrid").droppable({ 
    drop: function (event, ui) { 
    $(this).append(ui.helper.children()); 

$（這）是我們選擇，我們要追加臨時我們分頻器裏面的元素助手的報酬，這是表中的行。

$('.selectedRow').remove(); 
    } 

現在擺脫我們之前選擇的那些錶行。

}); 

讓我知道是否有任何錯誤，我會盡我所能將它們整理出來。它適用於我的目的。由於您可以突出顯示錶格行中的文本，因此如果拖放速度過快，並且突出顯示文本而不是選擇行本身，可能會出現一些問題。