Stack Overflow
Stack Overflow

Questions tagged [angular-cdk-drag-drop]

168 questions
3
votes
1 answer

Prevent shifting/movement of the items in a cdkDropList - Angular Material

I am facing with a problem with Drag and Drop library in Angular Material (Angular 8). I developed the following code:
Wolfetto
  • 1,030
  • 7
  • 16
3
votes
1 answer

Angular Drag and Drop absolute position elements selecting wrong index

I'm trying to drag items across two lists. The bottom list is a typical sorted list (like an "inventory"), but I want the top items to be unsorted and droppable anywhere (like a "game board"). I have it MOSTLY working, however when dropping into the…
Oren
  • 5,055
  • 3
  • 34
  • 52
3
votes
2 answers

cdkDropListDropped="drop($event)" is not firing, mat table with datasource

This is the situation I have, I need to make a column drag n' drop functionality using mat-table and cdkDragDrop from Angular (working with Angular 8). Here's what I have so far. Inside a component.html I have:
live2learn
  • 35
  • 1
  • 7
3
votes
0 answers

Swapping elements in list with Angular CDK Drag and Drop and CDKDropListEnterPredicate

I have a component based on this stackblitz: https://stackblitz.com/edit/angular-5mf7hl The problem arises when I try to swap elements within the list. I want the array items to swap places. In the stackblitz example above, the targeted listItem…
Harry
  • 31
  • 1
  • 3
3
votes
1 answer

CDK Drag Drop does not correctly change the position of images

I created an image gallery and I intend to change the position between them. For this I am using the Drag & Drop cdk library. My problem is that the exchange of images does not always happen correctly, sometimes I exchange the first image with the…
mvp Sets
  • 119
  • 1
  • 3
  • 9
2
votes
0 answers

Does swiper (https://www.npmjs.com/package/swiper) and cdkDrag(https://material.angular.io/cdk/drag-drop/overview) working together in Angular 2+?

I need to display both swiper (https://www.npmjs.com/package/swiper) and cdkDrag (https://material.angular.io/cdk/drag-drop/overview) functions for a group of elements. The problem is that when I use the swiper, cdkDrag stops working. Maybe I am…
Andrei
  • 341
  • 7
  • 23
2
votes
1 answer

Angular Drag & Drop: cdkDrag item dropping in nested cdkDropLists

Stackblitz to showcase issue: https://stackblitz.com/edit/angular-ivy-tzyvbe?file=src%2Fapp%2Fapp.component.html I have a outer cdkDropListGroup, and inside two cdkDropLists. The first cdkDropList also has two drop lists in it. I want to be able to…
Chris Burton
  • 23
  • 3
2
votes
0 answers

cdkDrag sometimes grabs uderlying link element

I have the cdkList as a parent component and it has a child where the elements are wrapped in a tag. My issue is that sometimes when I drag the element the underlying link will be grabbed instead of dragging/grabbing the child element/component…
Balu
  • 398
  • 6
  • 15
2
votes
0 answers

Angular CDK Drag'n'zone doesnt respect scrolling containers, dead drop zones

I have a problem with Angular's Drag'n'drop, DropZone to be exact. TL;DR DropZone in Angular CDK Drag'n'Drop works out-of-box only for non-scroll containers. If it has a scroll you have to use cdkScrollable, but this makes the column move in 4…
Chocho
  • 57
  • 6
2
votes
2 answers

Lost Rotate position on Drag element with Angular CDK DRAG

I'm trying to rotate an element with a range slider, but every time I drag the element it loses the value of the rotation while dragging and it also changes the position of the box and places it at the start. I am attaching a link to a simple test…
Esraa_92
  • 1,558
  • 2
  • 21
  • 48
2
votes
0 answers

Is there any method for implementing scroll for cdk drag drop

I have implemented cdk drag and drop in my application. I am working in angular 7. Angular material version is 7.3.7 and cdk version is 7.3.7. My problem is while dragging a item in cdkDropList, if the list is lenghty one with overflow, then the…
ADARSH K
  • 606
  • 1
  • 8
  • 21
2
votes
0 answers

How to restrict a cdkDrag element to be drag only beside a particular element?

Say I use ngFor to populate my cdkDropList. What is the most efficient way to restrict a cdkDrag element to only drag beside certain elements?
Shan Surat
  • 21
  • 1
2
votes
1 answer

@angular/cdk/drag-drop inside panzoom

I'm using Angular 10 with panzoom. Inside the panzoom element I have draggable elements using @angular/cdk/drag-drop. This works fine until I zoom in or out with the panzoom. When zoomed in the dragging is accelerated and moves faster than my…
Doug
  • 665
  • 2
  • 8
  • 22
2
votes
2 answers

How to use Angular CDK DragDrop with predefined slots?

StackBlitz: https://stackblitz.com/edit/league-predictions I have a project where I want to predict football league standings. I have two lists, one where the prediction goes, and one with all the teams. At the beginning the prediction list is…
Marcel
  • 398
  • 2
  • 4
  • 22
2
votes
2 answers

Angular Drag and Drop: can Enter predicate verify at which index the item is dropped?

I am using the Angular DragDropModule, and I want to drag an object from a list to another. This work perfectly, but I need my object to be dropped only at first or last index of the arrival list. The exemple here shows a list of numbers with an…
Vincent Gilabert
  • 53
  • 1
  • 9
1
2
3
…
11 12