angular / angular/components

Drag Drop: disable shifting on target droplist and enable replacing

Open
#16,153 6 comments 0 reactions 0 assignees View on GitHub
area: cdk/drag-drop feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Feature Description

Looking at multiple droplists enable to drag one item from droplist 1 to droplist 2. After dropping item 1 on item 2, switch position instead of shifting all items to the next position.

#### Use Case

What we now did is just added this to every droplist:
` (cdkDropListDropped)="drop($event, indexRow)"`

In this 'drop' function we made 2 situations, either `transferArrayItem()` or `moveItemInArray()`

This just moves the items inside the droplist or moves them from one droplist to another. This all works. The downside is though, while you are dragging an item from droplist 1 to droplist 2, you see all the items in droplist 2 shifting a position to the right (When horizontal orientated). While our code says in the background to just switch places.
After the code is done, the shifted items all go back to their original places.

Contributor guide

Open the contributing guide

Research direction

No file or test is named in the issue. Start by tracing the Angular CDK drag-drop list behavior and the cdkDropListDropped callback described here; done means cross-list drops visibly replace the target item without shifting neighboring items.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.