Drag rows in jqGrid

Question

I want to implement draggable rows feature in jqGrid and it's working also using option

$('#MyGrid').jqGrid('gridDnD', { 
connectWith: '#MyGrid2'}); 

Now, my client want to show "Drag here" text in target grid row at the position where the row will be dragged from existing to new one, how can I show this text while dragging row from source to target? Any help is appreciated...

Answer 1

I find your question interesting. So I modified the old demo from the answer and created the demo which demonstrates a possible implementation. The grid during dropping looks like on the picture below:

It uses the following code

$("#grid1").jqGrid("gridDnD", {
    connectWith: "#grid2",
    drop_opts: {
        activeClass: "",
        hoverClass: ""
    },
    onstart: function (ev, ui) {
        ui.helper.addClass("ui-widget ui-widget-content")
            .css({
                "font-size": "11px",
                "font-weight": "normal"
            });
    },
    onstop: function (ev, ui) {
        $("#dragHelper").hide();
    },
    droppos: "afterSelected", // "beforeSelected"
    beforedrop: function (e, ui, getdata, $source, $target) {
        var names = $target.jqGrid("getCol", "name2");
        if ($.inArray(getdata.name2, names) >= 0) {
            // prevent data for dropping
            ui.helper.dropped = false;
            alert("The row \"" + getdata.name2 + "\" is already in the destination grid");
        }
        $("#dragHelper").hide();
        $("#grid2").jqGrid("setSelection", this.id, true, e);
    },
    ondrop: function (ev, ui, getdata) {
        var selRow = $("#grid2").jqGrid("getGridParam", "selrow"),
            $tr = $("#" + $.jgrid.jqID(selRow));
        if ($tr.length > 0) {
            $("#grid2").jqGrid("setSelection", $("#grid2")[0].rows[$tr[0].rowIndex + 1].id, true);
        }
    }
});
// make every row of the destination grid droppable and select row on over
$("#grid2 tr.jqgrow").droppable({
    hoverClass: "ui-state-hover",
    over: function (e, ui) {
        $("#grid2").jqGrid("setSelection", this.id, true, e);
        $("#dragHelper").show().position({my: "right center", at: "left bottom", of: $(this)});
    }
});

I reserve some place for the tooltip "Drag here ↣" on the left of the grid and marked the row under the moved row additionally to make the position of the dropped row mostly clear. I used free jqGrid which have support of "afterSelected" and "beforeSelected" position of addRowData originally suggested in the answer. So I used droppos: "afterSelected". The dropped rows will be inserted after the selected row.