jQuery: Drag-and-Drop within two DevExpress grids, but NOT between them

Question

I have two DevExpress ASPxGridView in my ASP.Net webpage that each use Drag-and-Drop to sort their entries. Entries should never be dragged between the two GridViews. However, the jQuery example provided by DevExpress was for only a single GridView and does not have any code related to tracking which GridView the draggable came from. If the user drags a row from one grid to the other, it still fires an event which is leading to undefined behavior in my C# code behind (because I only receive the indices of the two rows and therefore can't verify that they came from the same GridView).

Currently the jQuery distinguishes between the two via a CSS class, "stc" on one and "ptc" on the other. In the ASCX file for the first grid:

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

And the second one is identical except that ".stc"->".ptc" and "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>

How do I customize the jQuery to not fire AutoDimDefinitionControl_MakeAction if the row is dropped on a different GridView than it was dragged from?

(Additionally, is it possible to condense these two jQuery scripts into one script that works for both grids?)

Answer 1

The following condition does the trick:

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