Stack Overflow
Stack Overflow

Questions tagged [angular-cdk-drag-drop]

168 questions
2
votes
1 answer

Angular drag & drop: How to prevent an item from being dropped in an unwanted list

I'm trying to use the drag and drop feature provided by angular material to be able to move items from the Options list to either the Incude or Exclude list(whatever is enabled depending on the selected radio button in the Where to move group) So…
eddy
  • 4,373
  • 16
  • 60
  • 94
2
votes
0 answers

Angular CdkDragDrop - Identify destination component on drop event

draging from parent componenet to some child componenet (of multiple same type childs) i am using (cdkDropListDropped)="drop($event)" to point : drop(event: CdkDragDrop) { console.log(event);// how can i get the instance of target…
mordechai
  • 829
  • 1
  • 7
  • 23
2
votes
0 answers

Best way to restrict possible insert positions for a drag into a dropList

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. For example, for a dropList with 10 elements, a drag element can only be dropped…
Andres T
  • 21
  • 1
1
vote
0 answers

Maximum call stack size exceeded when trying to implement Angular Drag and Drop grid

I'm trying to implement the same dragable grid as here: https://stackblitz.com/edit/angular-dragdrop-grid-pnyded. I faced a number of problems: First one was that CdkDropList enter() was deprecated, so i found solution here: CdkDropList enter…
anvyn
  • 31
  • 4
1
vote
0 answers

Unable to preventDefault inside passive event listener invocation in drag and drop

I'm using angular cdk drag and drop but while drag i'm not able to see my drag element it become hidden and i can see this console error Unable to preventDefault inside passive event listener invocation.drag-drop.js:468 In coding not written…
Raghul Rajendran
  • 21
  • 3
1
vote
1 answer

Angular : Draggable items inside draggable elements of a cdkDropList

I want to be able to drag elements inside elements that are part of a dragDropList. Here is the behaviour I want to achieve : https://stackblitz.com/edit/drag-cdk-version-7-vs-11?file=package.json It works fine with @angular/cdk version 7, but with…
Florian. C
  • 108
  • 6
1
vote
0 answers

How to drag and drop from mat-menu to another element on the page (using cdkdrag Angular Material)

Is there any way to drag from mat-menu and drop to another element on the page (using cdkdrag)? The approach taken by greatweatherforducks in this answer is very interesting, but it doest use cdkdrag, just the DragEvent interface. I have tried to…
Gustavo López Frutos
  • 61
  • 1
  • 6
1
vote
1 answer

Get the data of the dragged item on drop in CDK drag drop Angular

I have this data which i'm dragging ... i…
user3653474
  • 3,393
  • 6
  • 49
  • 135
1
vote
0 answers

What is causing this glitch in my cdkdragdrop module?

this is my first question on Stack Overflow so pardon my etiquette. I have a droplist which contains boxes (divs) which are also droplists. These boxes allow images to be dropped on them. I want to be able to move these boxes to anywhere on the main…
Faith Udoh
  • 11
  • 3
1
vote
0 answers

why cdkDragBoundary is not proper working?

I have selector component and I'm want to set this as draggable, But I also want to set some limit for dragging so I used cdkDragBoundary, but the problem is it is not working, it is not identifying its boundary. chat-notification.html
Drashtant Solanki
  • 191
  • 2
  • 7
1
vote
0 answers

How to auto scroll when dragging mat tabs with cdk drag drop

It seems that the cdk drag drop auto scroll is not working when used with mat tabs: Here is the template
Sa Hagin
  • 502
  • 1
  • 7
  • 18
1
vote
0 answers

how to implement drag and drop in event calendar in angular 14 using cdk?

I want to apply drag-and-drop to the calendar using Angular CDK I tried the following methods: AppComponent.html
1
vote
1 answer

Angular: Drag and Drop - Fill [cdkDropListConnectedTo] dynamically

Drag and drop should be possible as follows. You can move items from container 1 to containers 2, 3 or 4. You are not allowed to move items from container 2, 3 or 4 to container 1. items from containers 2 to 4 can be moved back and forth. I'm…
coder
  • 129
  • 7
1
vote
0 answers

Angular connect dynamically created Drop lists

I need to implement drag drop for tasks which are inside the column so I can transfer them between other columns. I have a component which has a list of columns (board-page.component) and also column component which has a list of…
Shahzod Kakhkhorov
  • 19
  • 3
1
vote
0 answers

Angular Material Drag & Drop - Get parent object that contains the cdkDropListData

I'm using Angular & Material 14 and have drag & drop in my application. Everything works, but when I transfer a child item to a child-list of another parent object, I need a way to know which parent object it was. This is the object structure: [ …
LukyFoggy
  • 519
  • 8
  • 31
1 2
3
…
11 12