Ensure the drop target remains properly identified for draggable columns #418
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
closes #417
Special classes are added to the cells that are being dragged over, so that they can be styled appropriately. However,
dragLeave
is not just triggered when the drag exits the cell, but also when the drag enters a child element inside the cell.If the table is implemented with draggable columns, and also with either child elements inside the table header cells, or resizable columns, the
is-drag-target
class will be removed from the cell even while it is being dragged over. Resizable columns add a extra div (with classlt-column-resizer
) inside the table header cell. This means that with both draggable and resizable columns, the drag target styling will rarely be applied when dragging to the left, while it mostly works while dragging to the right.Here is an Ember-twiddle demonstrating the problem: https://ember-twiddle.com/4ab83dd0909fe3bc2083a47c1b0ba6fb?openFiles=components.expandable-table.js%2C
There are a few different ways to approach this problem but there are annoying edge cases that introduce new bugs for a few of them that I tried. This solution is to reset
isDragTarget
to true indragOver
, since it is constantly being called while the cell is being dragged over. It seems to work pretty well.Here is a Twiddle demonstrating this solution: https://ember-twiddle.com/e30d04f1e3e1f4cdb3f95749dbeb3f6c?openFiles=components.expandable-table.js%2C