Allow developers to style the dragged item/row

[jouni]

Describe your motivation

In some use cases, it would be ideal to indicate to the end user which item they are dragging, in addition to the "ghost" element that follows the mouse, to let them know the original position from which they started the drag. It might be that there are two identical looking items, and in that case it is impossible to know which item is being dragged.

Describe the solution you'd like

Add a stylable CSS part name for the dragged row and its cells. For example vaadin-grid::part(dragged-row) and vaadin-grid::part(dragged-cell).

Describe alternatives you've considered

In start.vaadin.com, I used to rely on [part="row"]:active to indicate the start of a drag, and apply a reduced opacity style in that case. But it only works because “long pressing" is not used for anything else in the Grid that displays the views you add to the app.

Additional context

No response

[tomivirkki]

It would be convenient to have a built-in part name for this, but you can also generate one yourself:

let draggedItems = [];

grid.cellPartNameGenerator = (_, { item }) => {
  return draggedItems.includes(item) ? 'dragged-cell' : '';
};

grid.addEventListener('grid-dragstart', (e) => {
  draggedItems = e.detail.draggedItems;
  // Update the part names after a timeout to not have the styles applied for the ghost image
  setTimeout(() => grid.generateCellPartNames());
});

grid.addEventListener('grid-dragend', (e) => {
  draggedItems = [];
  grid.generateCellPartNames();
});