question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

cdkDragDrop: a way to disable the placeholders and animations on origin/destiny lists during a dragging action uppon given condition

See original GitHub issue

Feature Description

Ability to disable the displacement of items during the drag and drop actions

Use Case

Suppose you are using the cdkDropListSortingDisabled directive. When you drag an item from the source, you left a placeholder behind, at the source list, while you’re dragging.

Now imagine a situation where you have four instances of each item on the source list. Each item type appears just once on the list. The amount of instances of each type is actually represented by a number in the item (a badge, for example) instead of additional items on the list.

For example, in the item named after ‘carrots’, you’d have the number 10, indicating that you have 10 carrots at the store. When you drag a carrot item to your basket, instead of seeing a placeholder on the source, you’d see the real item. So you’d have at the same time the dragging copy of the item and the original item visible on the source list. When you finally dropped the item on the destiny list, you could finally decrease the number of available carrots and, eventually increase the number of carrots on your basket, without any place holder animation displacing items on the lists when the item type is already present on the origin/destiny lists.

The main point is: when you’re dragging… is there a way to move an item from the source without actually erasing it from the source element and drop it on the destiny without necessarily add a new item there. The behavior would be like upon some @Input setting. Basically I want to disable the items displacement (also disabling the placeholders) in the origin and destiny without preventing the other events?

image

cc: @crisbeto

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:5
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
DaveSkendercommented, Nov 20, 2019

Another use case where disabling placeholder would be nice: cdkDrag onto a cdkDropList with hidden elements (e.g. a trashcan or recycle bin).

1reaction
lincolnthreecommented, May 14, 2020

Agreed. Would be nice to create drop zones without visible elements shifting around inside (and without masking them via CSS.)

Read more comments on GitHub >

github_iconTop Results From Across the Web

drag and drop - How to disable element shifting/moving in ...
How can I disable the sorting or element shifting in target countries list when I am dragging the city element over the country...
Read more >
Drag and Drop
A class that is added to cdkDropList when it can receive an item that is being dragged inside a connected drop list. link...
Read more >
Exploring Drag and Drop with the new Angular Material CDK
Re-ordering items inside a list. Link to this section ... Now that we know how to create a draggable item and a drop...
Read more >
Getting to Know the Angular CDK Drag and Drop Feature
In this article, we'll learn how to use the drag and drop feature. If you want to learn about virtual scrolling, you can...
Read more >
Angular Material Drag and Drop – Strengths and Limitations
In an existing angular application with the CDK installed, import the DragDropModule from @angular/cdk/drag-drop into the appropriate NgModule.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found