Drag & drop rows without the diDrag icon

[jplevene]

Is there a way to drag and drop the entire row without using the drag helper?

I did below but this means there is a drag-handler icon:

Code: [Select]

dragModel: {
on: true,
diDrag: "QTY",
tmplDrag: '<span class="ui-icon ui-icon-grip-dotted-vertical pq-drag-handle" style="cursor:move; vertical-align:text-bottom; touch-action:none; float:left;">&nbsp;</span>',
diHelper: ["QTY", "NAME"]
},
dropModel: {
on: true
},
moveNode: function(e, uiDrop){ console.log(uiDrop); }
I don't want the diDrag drag-handler icon and just want to drag anywhere on the row to initiate the drag (I am already using row selection).  I thought of trapping a mouse down event and after a move of a certain amount of pixels, manually trigger a drag start, but not sure how?

[jplevene]

Should have mentioned, to work how jQueryUI Sortable works, or even use Sortable would be great

[jplevene]

Sorry, one more thing.  The drag and drop in a normal grid and a tree grid is very different.  The tree you drag and drop the entire row, the grid only a handle icon.

The tree grid is really strange and hard to understand and is not similar to the normal tree that uses a horizontal line. All other trees use a line or an indicator arrow to show if the drop is inside, above, below, or at the parent (the arrows indent).  A really good example is https://preview.keenthemes.com/html/keen/docs/general/jstree/dragdrop.

[paramvir]

jQueryUI sortable doesn't work with virtualized DOM so the whole rows need to be rendered in view.

The selectionModel.type needs to be turned off to give the mouse control to sortable.

The following is a quick sample of sortable with pqgrid.

https://jsfiddle.net/us7kmz21/

[jplevene]

Is there a way to do it without using sortable, and just pqGrid native as I still need to select row?

[paramvir]

sortable + pqgrid also works with selectionModel: {type: 'row'}

however in pqgrid native DnD, a row can't be dragged without a drag helper / icon.