GridPro column drag&drop reordering does not work with GridPro edit columns

[ugur-vaadin]

Description

The GridPro edit columns cannot be reordered using drag&drop. Regular columns can still be reordered, however the combination is problematic. The edit columns also do not work correctly as drop targets.

The problem starts with v24.2. It works as expected in v24.1. It is likely that the regression is caused by the LitElement based GridPro PR.

Expected outcome

I would expect the edit columns to be reordered correctly.

Minimal reproducible example

This can be observed using the grid in GridPro dev page, adding the attribute column-reordering-allowed as follows:

<vaadin-grid-pro single-cell-edit column-reordering-allowed>
      <vaadin-grid-pro-edit-column path="name.first"></vaadin-grid-pro-edit-column>
      <vaadin-grid-pro-edit-column path="name.last"></vaadin-grid-pro-edit-column>
      <vaadin-grid-pro-edit-column
        path="name.title"
        editor-type="select"
        editor-options='["mr", "mrs", "ms"]'
      ></vaadin-grid-pro-edit-column>
      <vaadin-grid-pro-edit-column path="married" editor-type="checkbox"></vaadin-grid-pro-edit-column>
</vaadin-grid-pro>

Steps to reproduce

1. Add the snippet above to an HTML page
2. Try to drag any of the columns
3. Observe that it is not draggable

Environment

Vaadin version(s): 24.2, 24.3, 24.4
OS: MacOS

Browsers

Chrome

[sissbruecker]

A related test has been passing in CI but not locally, so the regression was not identified. Disabled the test for now in #7251 so that it allows running tests locally. The test should be restored as part of fixing this issue.