jQuery：在两个 DevExpress 网格中拖放，但不在它们之间答案

【问题标题】：jQuery: Drag-and-Drop within two DevExpress grids, but NOT between themjQuery：在两个 DevExpress 网格中拖放，但不在它们之间
【发布时间】：2020-01-16 22:52:10
【问题描述】：

我的 ASP.Net 网页中有两个 DevExpress ASPxGridView，每个都使用拖放来对条目进行排序。永远不应在两个 GridView 之间拖动条目。但是，DevExpress 提供的 jQuery 示例仅针对单个 GridView，并且没有任何与跟踪可拖动对象来自哪个 GridView 相关的代码。如果用户将一行从一个网格拖到另一个网格，它仍然会触发一个事件，该事件会导致后面的 C# 代码中出现未定义的行为（因为我只收到两行的索引，因此无法验证它们来自相同的 GridView）。

目前，jQuery 通过一个 CSS 类区分这两者，一个是“stc”，另一个是“ptc”。在第一个网格的 ASCX 文件中：

<script type="text/javascript">
function stc_InitalizejQuery() {
    $('.draggable.stc').draggable({
        addClasses: false,
        helper: 'original',
        start: function (event, ui) {
            var $draggingElement = $(ui.helper);
            $draggingElement.width(gvStringTypes.GetWidth());
        }
    });
    $('.draggable.stc').droppable({
        activeClass: "hover",
        tolerance: "intersect",
        hoverClass: "activeHover",
        drop: function (event, ui) {
            var draggingSortIndex = ui.draggable.attr("SortRank");
            var targetSortIndex = $(this).attr("SortRank");
            AutoDimDefinitionControl_MakeAction(gvStringTypes, "DRAGROW|" + draggingSortIndex + '|' + targetSortIndex);
        }
    });
}
</script>    

...

<Styles>
    <Row CssClass="draggable stc"></Row>
</Styles>

除了“.stc”->“.ptc”和“gvStringTypes”->“gvPointTypes”之外，第二个是相同的：

<script type="text/javascript">
function ptc_InitalizejQuery() {
    $('.draggable.ptc').draggable({
        addClasses: false,
        helper: 'original',
        start: function (ev, ui) {
            var $draggingElement = $(ui.helper);
            $draggingElement.width(gvPointTypes.GetWidth());
        },
    });
    $('.draggable.ptc').droppable({
        activeClass: "hover",
        tolerance: "intersect",
        hoverClass: "activeHover",
        drop: function (event, ui) {
            var draggingSortIndex = ui.draggable.attr("SortRank");
            var targetSortIndex = $(this).attr("SortRank");
            AutoDimDefinitionControl_MakeAction(gvPointTypes, "DRAGROW|" + draggingSortIndex + '|' + targetSortIndex);
        }
    });
}
</script> 

...

<Styles>
    <Row CssClass="draggable ptc"></Row>
</Styles>

如果将行拖放到与从中拖动不同的 GridView 上，如何自定义 jQuery 以不触发 AutoDimDefinitionControl_MakeAction？

（另外，是否可以将这两个 jQuery 脚本压缩为一个适用于两个网格的脚本？）

【问题讨论】：

标签： javascript jquery devexpress

【解决方案1】：

以下条件可以解决问题：

            ...
            if (ui.draggable.hasClass('stc')) {
                AutoDimDefinitionControl_MakeAction(gvStringTypes, "DRAGROW|" + draggingSortIndex + '|' + targetSortIndex);
            }
            ...

【讨论】：