jquery - jquery拖拽多项目网格

Question

我想在三个网格之间拖放多条线。我想通过单击每行前面的复选框来选择行，然后将它们拖放到另一个网格中。我的示例仅适用于一行。谁能帮我实现gridview的多行拖放。你可以在下面看到我的代码。

html代码

<asp:GridView ID="gvOAVerifies" runat="server" CssClass="drag_drop_grid GridDest" AutoGenerateColumns="false">
                        <Columns>
                            <asp:TemplateField HeaderText="Check Box" >
                                <ItemTemplate>
                                    <asp:CheckBox ID ="chkVerifies" Text="text" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="Nom" HeaderText="Nom" />
                            <asp:BoundField DataField="Categorie_Juridique" HeaderText="Catégorie Juridique" />
                            <asp:BoundField DataField="Actions" HeaderText="Actions" />
                        </Columns>
                    </asp:GridView>

html生成的代码

   <table class="drag_drop_grid GridDest ui-sortable" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies" style="border-collapse:collapse;">
            <tbody><tr>
                <th scope="col">Check Box</th><th scope="col">Nom</th><th scope="col">Catégorie Juridique</th><th scope="col">Actions</th>
            </tr><tr>
                <td>
                                    <input id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl02_chkVerifies" type="checkbox" name="ctl00$ContentPlaceHolder1$ucOrganismesAssocies$gvOAVerifies$ctl02$chkVerifies"><label for="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl02_chkVerifies">text</label>
                                </td><td>OA1</td><td>&nbsp;</td><td>Voir</td>
            </tr><tr>
                <td>
                                    <input id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl03_chkVerifies" type="checkbox" name="ctl00$ContentPlaceHolder1$ucOrganismesAssocies$gvOAVerifies$ctl03$chkVerifies"><label for="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl03_chkVerifies">text</label>
                                </td><td>OA2</td><td>&nbsp;</td><td>Voir</td>
            </tr><tr>
                <td>
                                    <input id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl04_chkVerifies" type="checkbox" name="ctl00$ContentPlaceHolder1$ucOrganismesAssocies$gvOAVerifies$ctl04$chkVerifies"><label for="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl04_chkVerifies">text</label>
                                </td><td>OA3</td><td>&nbsp;</td><td>Voir</td>
            </tr><tr>
                <td>
                                    <input id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl05_chkVerifies" type="checkbox" name="ctl00$ContentPlaceHolder1$ucOrganismesAssocies$gvOAVerifies$ctl05$chkVerifies"><label for="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl05_chkVerifies">text</label>
                                </td><td>OA4</td><td>&nbsp;</td><td>Voir</td>
            </tr><tr>
                <td>
                                    <input id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl06_chkVerifies" type="checkbox" name="ctl00$ContentPlaceHolder1$ucOrganismesAssocies$gvOAVerifies$ctl06$chkVerifies"><label for="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAVerifies_ctl06_chkVerifies">text</label>
                                </td><td>OA5</td><td>&nbsp;</td><td>Voir</td>
            </tr>
        </tbody></table>
<table class="drag_drop_grid GridDest ui-sortable" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAConditions" style="border-collapse:collapse;">
            <tbody><tr>
                <th scope="col">Check Box</th><th scope="col">Nom</th><th scope="col">Catégorie Juridique</th><th scope="col">Actions</th>
            </tr><tr>
                <td>
                                    <input id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAConditions_ctl02_chkConditions" type="checkbox" name="ctl00$ContentPlaceHolder1$ucOrganismesAssocies$gvOAConditions$ctl02$chkConditions"><label for="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAConditions_ctl02_chkConditions">text</label>
                                </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </tbody></table>
<table class="drag_drop_grid GridDest ui-sortable" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAErreur" style="border-collapse:collapse;">
            <tbody><tr>
                <th scope="col">Check Box</th><th scope="col">Nom</th><th scope="col">Catégorie Juridique</th><th scope="col">Actions</th>
            </tr><tr>
                <td>
                                    <input id="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAErreur_ctl02_chkErreur" type="checkbox" name="ctl00$ContentPlaceHolder1$ucOrganismesAssocies$gvOAErreur$ctl02$chkErreur"><label for="ctl00_ContentPlaceHolder1_ucOrganismesAssocies_gvOAErreur_ctl02_chkErreur">text</label>
                                </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </tbody></table>

CSS代码

<style type="text/css">
        .GridSrc td
        {
            background-color: #A1DCF2;
            color: black;
            font-size: 10pt;
            font-family: Arial;
            line-height: 200%;
            cursor: pointer;
            width: 100px;
        }
        .GridSrc th
        {
            background-color: #3AC0F2;
            color: White;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            width: 100px;
        }
        .GridDest td
        {
            background-color: #eee !important;
            color: black;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            cursor: pointer;
            width: 100px;
        }
        .GridDest th
        {
            background-color: #6C6C6C !important;
            color: White;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            width: 100px;
        }
         .selected {
          background:red !important;
        }
        .hidden {
          display:none;
        }
    </style>

jQuery代码

<script type="text/javascript">
        $(function () {
            $('#chkVerifies').change(function () {
                alert("hi");
                if (this.checked) {
                    $(this).toggleClass('selected');
                    alert(selected);
                }
                
            }); 
            
            $(".drag_drop_grid").sortable({
                items: 'tr:not(tr:first-child)',
                cursor: 'crosshair',
                connectWith: '.drag_drop_grid',
                axis: 'y',
                dropOnEmpty: true,
                receive: function (e, ui) {
                    $(this).find("tbody").append(ui.item);
                }
            });
            
        });
    </script>

标签： jqueryasp.netgridviewdrag-and-drop