javascript - 将多行从一个表拖放到另一个表

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

如何处理多行？

问候，卡尔提克。

Answer 1

您可以使用 draggable 的辅助函数。有一个很好的实现 here .

以下是使用上述内容作为特定代码指南的外观:

JsFiddle Demonstration:

对发生的事情的解释:

(1) 如果只有一个被选中，那么我们就将其视为一次拖放。因为它还没有被点击(鼠标按住并立即拖动)，我们将手动添加 selectedRow 类以确保它被正确地从原来的位置移除。

(selected.length === 0) {
      selected = $(this).addClass('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());

$(this) 是我们选择的，我们将元素附加到助手返回的临时分隔线中，即表格行。

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

现在删除我们之前选择的那些表格行。

});

如果有任何错误，请告诉我，我会尽力解决。它对我有用。由于您可以突出显示表格行中的文本，因此如果拖放速度过快并且您是突出显示文本而不是选择行本身，则可能会出现一些问题。