components icon indicating copy to clipboard operation
components copied to clipboard

[cdk drag drop] restrict possible insert positions for a drag into a dropList

Open ataraciuk opened this issue 5 years ago • 9 comments

Feature Description

I would like to be able to somehow limit at what positions a drag element can be dropped into a dropList. I couldn't find any way of doing that with the current API.

Ideally, if let's say a drag can only be dropped into position 3 or bigger, and it's begin dragged over position 1, the drop would still allowed, but the placeholder would show position 3, and drop event would occur over position 3, and not 1.

I'm considering using a combination of CdkDragEnter and CdkDragMove to style the placehoder for invalid positions and then the drop event to cancel an invalid move, but maybe there's a better way of doing that? Any advice will be appreciated.

I also considered using multiple droplists, but I need the whole area to be droppable, and with the long term goal of showing the placeholder on the previous valid index (as opposed to not showing a placeholder and not allowing the drop), a single dropList sounds a better approach.

Thank you.

Use Case

For a dropList with 10 elements, a drag element can only be dropped between positions 3 and 7. Dragging over positions 1 and 2 shows the placeholder element on position 3, and drop event has position parameter set as 3. As a less desirable but still happy outcome, when dragging over positions 1 or 2 a placeholder is not shown, and the dropList does not fire the drop event when dropping there, as if the move were invalid.

ataraciuk avatar Mar 02 '20 14:03 ataraciuk