jQuery Grid Plugin - jqGrid

Hi,

In an early version of jqgrid, I used jquery ui draggable to allow me to drag a <tr> and drop on a <textarea> that is outside and in a different <div> than the jqgrid table. I used a custum helper as the drag helper, so that if the user dragged more than one row (selected by the multi select check boxes) the drag image showed custom text similar to moving multiple emails in hotmail, e.g. “moving 3 emails” instead of showing a clone of the <tr>.

Having upgraded to Ver 3.6, this no longer works. I can drag the <tr> and the custom helper works, but it is contained  within the <tbody> of the jqgrid table, causing horizontal scrolling  to occur when I drag to the left hand side, and the drag helper is not visible outside of the tbody.

Is there anyway to allow a <tr> to be dragged outside of the jqgrid table using jquery ui draggable? Same code below:

$(”#staffList”).jqGrid({
        url:'ajax.php?p=staff&fn=getJsonBatch&nd='+new Date().getTime(),
        datatype: “json”,
        multiselect: true,
        width: 400,
        colNames:['staffid','name','surname'],
        colModel:[ {name:'staffid',index:'staffid', width:55},
                   {name:'forename',index:'forename', width:90},
                   {name:'surname',index:'surname', width:100} ],
        pager: '#pager2',
        rowNum:<?=$rowsPerPage?>,
        sortname: 'staffid',
        scroll: false,
        shrinkToFit: false,
        scrollrows: false,
        viewrecords: true,
        sortorder: “desc”,

        gridComplete : function(){
            $(”#staffList tbody tr”).draggable({
                    cursor: 'move',
                    cursorAt: {top: -12, left: -20},
                    containment: $('#mainbody'),                   
                    zIndex: 9999 ,
                    helper: function(event){
                        var vSelectedStaff = $(”#staffList”).getGridParam('selarrrow');
                        if(vSelectedStaff.length > 1){
                            return $('<div class=”ui-widget-header”>' + vSelectedStaff.length + ' staff members</div>');
                        }else {
                            return $('<div class=”ui-widget-header”>' + $(this).attr('id') + '</div>');
                        }
                    }
                   
             });
        }

        });