Stack Overflow
Stack Overflow

Questions tagged [angular-cdk-drag-drop]

168 questions
16
votes
1 answer

CdkDropList enter deprecated not exists in CdkDropList

After doing the update to Angular Material 10 I got a problem with drag&drop directive. enter, in cdkDropList doesn't exists anymore and so my code this.placeholder.enter(drag, drag.element.nativeElement.offsetLeft,…
Atlas91
  • 5,754
  • 17
  • 69
  • 141
10
votes
3 answers

Element style doesn't apply when using cdkDropList (Angluar cdk drag and drop)

I am posting this question just to answer it myself in case anyone is struggling like I did! I'm working on an angular project to implement a Trello-like application. I want to be able to drag an element from one list to another so I installed the…
Yezan Rafed
  • 532
  • 5
  • 15
9
votes
0 answers

Implementing Drag and Drop in an Angular Material tree - nest node when another node is hovered

This question has been brought up a number of times on SO, but not recently, and the example here is more complete than other ones I have seen. The best implemention of drag and drop with a material tree is this one posted here on medium by…
Meqwz
  • 1,319
  • 8
  • 14
9
votes
1 answer

ERROR TypeError: Cannot read property 'length' of undefined in Angular 7 Drag and Drop

I am just trying to create drag and drop component with the help of Angular 7 DragDropModule from @angular/cdk/drag-drop. But I am always getting the error as below. HomeComponent.html:14 ERROR TypeError: Cannot read property 'length' of undefined …
Sibeesh Venu
  • 18,755
  • 12
  • 103
  • 140
7
votes
1 answer

Angular cdk drap drop - dynamic placeholder height

I want to set the placeholder height to height of dragging element. For now I'm using static height placeholder of smallest possible element height. I couldn't find any informations about how to do it and for now having no idea. component html
Smokovsky
  • 569
  • 1
  • 7
  • 21
6
votes
2 answers

Make Angular dialog draggable only by title

I've already done this:
But the solution causes the dialog to be draggable by clicking any place of the window which makes impossible to…
Supervision
  • 1,683
  • 1
  • 18
  • 23
6
votes
3 answers

contenteditable is not working with cdkDrag

I am trying to use a div element tag and make it behave as a textarea with css. #textarea { -moz-appearance: textfield-multiline; ------------ card.component.css -webkit-appearance: textarea; border: 1px solid gray; font: medium…
Amulya Vasa
  • 63
  • 4
5
votes
1 answer

Angular material drag and drop for multi level nested data

I have few columns and each column have few small sections which have some fields in it. I need to apply angular material drag and drop to this, so then, I should be able to move the Groups within the column also should be able to move the groups…
RZLJ
  • 73
  • 6
5
votes
0 answers

How can i detect when div is crosses over another div element on cdk drag and drop angular material

I use angular material cdk drag and drop on my project, first i create element dynamically and then i drag it and drop on any position on my screen. When i create 2 divs and drag div on div, is there is a way to know when the div dropped on other…
DevTool
  • 319
  • 1
  • 3
  • 17
4
votes
1 answer

Angular CDK Drag & Drop - Snap to Grid

I am trying to use Angular's CDK Drag & Drop feature and its working great, however I can't find documentation on how to snap to a grid. I found a GitHub issue that states that this feature has been…
LudacrisX1
  • 330
  • 1
  • 5
  • 12
4
votes
1 answer

How can I relate a cdk drag item into a list of cdk drop list?

I want to build a simple drag and drop game using @angular/cdk/drag-drop module, I have some drop zones and a draggable item that the player should choose the correct drop zone and drag the item to it. my problem is I can't bind my custom data…
Vahid
  • 474
  • 2
  • 7
  • 20
4
votes
1 answer

Angular Cdk Drag and drop, constant length lists

I've been wrecking my brain on this problem for quite some time now. What I want to achieve is to have two connected drag and drop lists with constant length. Meaning that if I move an element from one list to another, an item gets pushed to the…
Kim Ulvik
  • 61
  • 1
  • 8
4
votes
2 answers

Angular Drag and Drop using Observable as datasource

I want to use an Observable as the data source for a material drag and drop, but I'm struggling at the moment. Basically I have a list of swimlanes in a kanban board and each swimlane has a bunch of items that I want to move around. When I move an…
Jim Jimson
  • 2,368
  • 3
  • 17
  • 40
3
votes
1 answer

ngx quill editor not working while using cdkDrag directive of Angular Material

Quill editor not focused or not able to type the content while using cdkDrag directive of Angular Material. Here I share the StackBlitz code. https://stackblitz.com/edit/angular-ivy-xalouc Understanding: If right click on the editor, It's…
Dinesh Kannan
  • 135
  • 1
  • 1
  • 7
3
votes
1 answer

How to change an Angular Material CdkDroplist behavior to emulate a “free” dropzone?

The goal is to make a full-width dropzone. In which I can drop "widgets" and drag them freely around the dropzone. But the twist is that I can also drop list widgets, in which I can drop other widgets as well.. So I have this stackblitz With the…
Rafael de Castro
  • 888
  • 4
  • 16
  • 37
1
2 3
…
11 12