Drag drop ability to drag from an entire row or a cell and better drop indicator

[jplevene]

START DRAG ENTIRE ROW CLICK

Instead of dragging to be defined by objects with the class "pq-drag-handle", use an additional class with no styling attached to it, like "pq-drag-handle-element" (or change the icon to pq-drag-handle-icon), meaning the drag icon would have 2 classes, one to style and the other to signify it's purpose as a drag handle.

To currently accomplish this I do the following:

Code: [Select]

treeModel>render: function(ui){ return { cls:"pq-drag-handle", style:"transform:none; transform-origin:0; opacity:1;" } }
I set numberCell.show=false and don't set diDrag.

The above works, but it would be far easier and more adaptable if I could just assign a class to a row, element or cell.

DROP INDICATOR

The current drop indicator is pqGrid is very confusing and not standard, especially the divider line, something I have never seen before so it is not intuitive.  A far more common way to do this is the jsTree method (a seemingly abandoned project now) which can be seen at https://www.jstree.com/demo/. jsTree just shows a small arrow marker either within, above or below the node to signify the drop position, which changes the closer to the top or bottom of the node the cursor gets, which is intuitive and a common standard.  Please can you implement this or something similar?

[paramvir]

Thanks for your feedback and suggestions,

Reason for using a drag handle and not an entire row / cell is to support both cell range selection and DnD simultaneously for which same mouse gesture is used.

However, I will assess the recommended features to determine the most effective way to integrate them, considering the constraints of time, priority, and feasibility.

[jplevene]

I understand, all I am saying is let the handle have 2 classes, one for the styling and one for setting the dragging element (no styling), that way the programmer can hide the standard drag handle icons and assign the handle class to a row or any element within the row to be the drag handle.  With my method, range selection still works.  I actually used row selection with block (not check boxes) and did the following:

Code: [Select]

dragModel:{
on: true,
diHelper: ['NAME'],
dragNodes: function(rd, evt){
// Get selected rows
var sel_rows = grid.pqGrid("SelectRow").getSelection(),
selected_rd = [];

$.each(sel_rows, function(i,v){
selected_rd.push(v.rowData);
});
// Return the row data of all the selected rows
return (selected_rd.length && selected_rd.indexOf(rd)>-1 )? selected_rd : [ rd ];
}
},
As mentioned, I have overcome this, but I just thought it would make it easier for others.

The drop indicator I feel is quite important as the current method is not a known standard and is confusing to end users.