asp.net 2 GridViews 允许从源拖放到目标，反之亦然答案

【问题标题】：asp.net 2 GridViews allow drag and drop from source to destination but not vice-versaasp.net 2 GridViews 允许从源拖放到目标，反之亦然
【发布时间】：2017-08-29 09:58:33
【问题描述】：

我有两个 GridView：

                    <asp:GridView ID="gvCourses" runat="server" DataKeyNames="Course_ID" AutoGenerateColumns="False" CssClass="drag_drop_grid GridSrc"

                                  ShowHeaderWhenEmpty="true"
                                  ShowFooter="True">
                        <Columns>
                            <asp:BoundField DataField="CourseName"/>
                            <asp:BoundField DataField="DefaultSlope"/>
                        </Columns>
                    </asp:GridView>
                    <hr/>
                    <asp:GridView ID="gvDest" runat="server" CssClass="drag_drop_grid drag_and_drop_grid_sortable GridDest" AutoGenerateColumns="false">
                        <Columns>
                            <asp:BoundField DataField="CourseName"/>
                            <asp:BoundField DataField="DefaultSlope"/>
                        </Columns>
                    </asp:GridView>

我正在使用以下代码在它们之间进行拖放：

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript">
$(function () {
    $(".drag_drop_grid").sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'crosshair',
        connectWith: '.drag_drop_grid',
        dropOnEmpty: true,
        receive: function(e, ui) {
            $(this).find("tbody").append(ui.item);
        },
        sort: function (event, ui) {
            var tdCount = 0;
            ui.item.find('td').each(function () {
                tdCount++;
                if (tdCount > 3)
                    $(this).remove();
            });
        },
        beforeStop: function (event, ui) {
            var tdCount = 0;
            ui.item.find('td').each(function () {
                tdCount++;
                if (tdCount > 3)
                    $(this).remove();
            });
        },
        helper: function (e, tr) {
            //copyHelper =
            tr.clone().insertAfter(tr);
            var tdCount = 0;
            tr.find('td').each(function () {
                tdCount++;
                if (tdCount > 3)
                    $(this).remove();
            });
            return tr.clone();
        }
    });
    $("[id*=gvDest] tr:not(tr:first-child)").remove();
});
</script>

它工作正常，但它允许对源网格视图进行排序和复制记录。换句话说，我可以在那个 gridview 上丢掉不想要的东西。

它还允许目标网格复制它自己的记录/表格行。

我需要在我的脚本中更改什么：

不允许对源网格进行排序和删除。
禁止从目标网格内复制。

谢谢。

【问题讨论】：

标签： c# asp.net jquery-ui gridview drag-and-drop

【解决方案1】：

这花费的时间比我想要的要多，但是...

   $("#gvCourses tr:not(tr:first-child)").draggable({
        connectToSortable: '#gvSelectedCourses',
        helper: "clone",
        revert: "invalid",
        cursor: "move"
    });

    $("#gvSelectedCourses").sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'crosshair',
        dropOnEmpty: true,
        receive: function (e, ui) {
            sortableIn = 1;
            copyHelper = null;
        },
        beforeStop: function (event, ui) {
            if (sortableIn == 0) {
                ui.item.remove();
            }
        },
        over: function (e, ui) { sortableIn = 1; },
        out: function (e, ui) { sortableIn = 0; },
    });

第一个表 -- gvCourses -- 不可排序或可删除，也不能删除行，我可以将行从它拖到第二个表。

第二个表——gvSelectedCourses——是可排序和可删除的，我可以从中删除表行，它可以采用重复的行。

【讨论】：