Questions tagged [angular-cdk-drag-drop]
168 questions
1
vote
1 answer
How can we integrate cdk Drag and Drop in ng-select dropdown
Is it possible to rearrange the multiple selection values in ng-select using cdk Drag and drop. you can check Stackblitz
Implementation is changing the model values but not reflected in the dropdown.
what could be the way user can rearrange the…
Vanu
- 63
- 1
- 12
1
vote
0 answers
Is it possible to use cdk-drag-and-drop directives across multiple child components?
I'm working on a project which uses Angular's cdk-drag-and-drop functionality to be able to sort a grid of cards. Because it's a grid, I'm using this StackBlitz as an example. The example does exactly what I want to achieve.
There is a slight…
Niles11
- 553
- 1
- 6
- 17
1
vote
1 answer
Is there any way to access the current index in the CdkDragMove event object
I am using the Angular CDK drag-drop (Material UI) and I want to get the current index of the dragged item in the CdkDragMove event object. Can anyone guide me?
Mohammad Yasrebi
- 13
- 5
1
vote
1 answer
How to use Angular CDK Drag and Drop library to upload files
I have a custom angular file-upload component which I would like to use Angular CDK drag&drop. It looks nice, but when I try to implement it to handle a file upload (you drag a file into the dropzone) it doesn't seem to work and the browser opens…
Jeanluca Scaljeri
- 26,343
- 56
- 205
- 333
1
vote
1 answer
Problem with CDK Drag and Drop Resizable (Angular)
I've tried to resize an element with Angular CDK Drag and Drop, but I can't get it.
Somebody can help me? What do I need to do to achieve this result? I'm building a template similar to a report, where I can drag and drop fields inside the DIV HTML.…
Arlei Zomer
- 29
- 1
1
vote
0 answers
Angular Material Multi Drag Drop, limit the drag drop to specific droplist only
Dear all Angular gurus...
I had found an awesome angular material multi drag drop example online and wanted to limit the drag drop only allow from ListA to ListB, and disable the drag drop from ListB to ListA. (stackblitz link attached below)
Had…
user2374267
- 11
- 1
1
vote
0 answers
Drag drop with @angular/cdk gives wrong event data for drop
I have looked around the @angular/cdk examples for drag-drop and almost all of them are for sorting lists and dragging an item across different lists.
I am trying to implement a file-folder kind of behavior where you have a list of items (each item…
funkycoder
- 525
- 4
- 17
1
vote
1 answer
Can't bind to 'cdkDragFreeDragPosition' since it isn't a known property of 'div'
I have posted my code below. I am using angular DragDropModule and for some reason [cdkDragFreeDragPosition] is not working. it gives me the error shown below. I added DragDropModule to my ngModule as shown below. When I remove…
z123
- 193
- 1
- 15
1
vote
0 answers
Drag & Drop area for a particular json element *ngFor
Drag & Drop feature using angular material cdk and I want to achieve drop ara for each json element
html
coder
- 11
- 3
1
vote
1 answer
CdkDragDrop in CdkPortal is not responding
I am trying to use CdkDragDrop to reorder a list that is hosted in a CdkPortal window and it does not work.
HTML:
Funn_Bobby
- 647
- 1
- 20
- 57
1
vote
2 answers
Angular CDK drag and drop wrong drag direction when container rotates
I'm implementing drag and drop on a checkers like game, all working fine ... until the board is rotated then all dnd and implementation is broken: when I drag a piece to the top, the piece goes to bottom, when is dragged to the left, goes to the…
1
vote
1 answer
Smooth move to x and y position with cdkDragFreeDragPosition in @angular/cdk/drag-drop
I'm creating a realtime system with Angular 10 where the user 1 drags items on the screen and the location of the item updates on user 2 screen. I'm using @angular/cdk/drag-drop for this.
I am updating the position on the user 2 screen by binding…
Doug
- 665
- 2
- 8
- 22
1
vote
0 answers
[cdkDropListConnectedTo]="[todo]" not connected to #todo in another div
[cdkDropListConnectedTo]="[todo]" not connected to #todo in another div using Angular 9
it says the property "todo" does not exist on "Component_name"
cdkDropList #todo="cdkDropList" [cdkDropListData]="unScheduleTasksArray" …
Sreenath Reddy
- 11
- 1
- 6
1
vote
2 answers
How to set up correctly cdk drag-drop for Angular?
see my steps
npm install @angular/cdk
in app.module.ts -> import { DragDropModule } from '@angular/cdk/drag-drop'; and import: [DragDropModule]
next I want create drag and drops cards list. I created component for one card, and created…
den_gera
- 55
- 1
- 8
1
vote
1 answer
Angular drag and drop intersection (e.g. rows and columns in a table)
I'm trying to implement two drag and drops that intersect using cdkDragDrop. While I'd prefer to avoid tables overall, I've created one for the purposes of (hopefully) easier explanation.
Link to StackBlitz:…
Aaron
- 271
- 2
- 11