Stack Overflow
Stack Overflow

Questions tagged [angular-cdk-drag-drop]

168 questions
0
votes
1 answer

How to apply conditional styling to a cdkDragPlaceholder?

I am trying to change the background color of a custom drag placeholder based on a conditional that checks for certain overlaps. I am logging the value of the boolean and it updates correctly, yet the styling does not get updated. I am using…
isaac1996
  • 23
  • 7
0
votes
1 answer

Making dynamically added component draggable

I'm dynamically creating Angular component on click event using passed placeholder ViewContainerRef reference (method createComponent). Then in the same method I'm using modal.open to open a new NgbModal dialog. Everything works smoothly, except…
Alexander
  • 1,152
  • 1
  • 16
  • 18
0
votes
0 answers

How to enable dropping an element to another browser tab and drop there using cdkDrandAndDrop?

I am using angular cdkDragAndDrop to drag and drop elements from one list to another, but I would like to extend my implementation to also enable dragging the element to another tab of the same page and drop it there. But when I try to drag the…
Meenakshi
  • 31
  • 1
  • 7
0
votes
0 answers

how to add new event in calendar and apply drag and drop to it using angular cdk?

I am using NgxEventCalendarModule to create an event calendar to do the following task: User can add a new event user can edit the events user can see the events user can drag and drop event here is my app.component.html
0
votes
0 answers

How to drag and drop Option-Groups with @angular/cdk in HTML

I want to create a drag-and-drop system, where you can drag a whole group of items to another table, or a single object of an item. My problem is, that if I try to drag only an object of an item, the whole item gets dragged. I created a Stackblitz,…
JackTheRealPi
  • 65
  • 5
0
votes
2 answers

Why cdkDropList element cannot be hidden conditionally using *ngIf? Is there a workaround for that?

I have multiple cdkDropLists, and I drag and drop items from one to the other. However, I want one of them to be hidden in certain conditions, defined by a function in my Angular component's .ts file. The HTML code snippet on how I want to do it is…
Maligetzian
  • 15
  • 3
0
votes
0 answers

Updating the properties of a dragged item using angular cdk-drag-drop causes to update the duplicated entries

I have a list of items and I need to drag and drop each of the item to a droppable container. I am using copyArrayItem from @angular/cdk/drag-drop. Also, I want to update some properties of each item after droping it to the droppable container. The…
Akhil Joseph
  • 1
  • 1
  • 3
0
votes
0 answers

Drap/ drop item use CDK in angular grid layout

I want to build the function drag/drop using CDK show grid layout like this demo: https://tiberiuzuld.github.io/angular-gridster2/ But can't do that. I can only do it like this demo https://angular-dragdrop-grid-dj41ya.stackblitz.io and…
Love
  • 13
  • 4
0
votes
0 answers

Angular Material CDK - Drag and Drop between windows/screens

Is it possible to drag and drop elements between windows/screens using Angular Material CDK drag & drop? I'm trying to implement kanban. I've managed to display swimlanes and items in them. Also dragging and dropping between swimlanes work like a…
AzerC
  • 1
0
votes
1 answer

Angular CDKDragDrop - How to prevent drag items from one list to another

How can I prevent dragging items from one list to another? I have 3 lists, I want to allow users to drag and drop from list1 to list2 and not from\to list3 In list 3 I want to enable drag and drop only in the list itself (reorder the items inside…
Ortal Blumenfeld Lagziel
  • 2,415
  • 3
  • 23
  • 33
0
votes
1 answer

Angular Material Unable to implement multiple Drag & Drop

I have implemented angular material grid list and I'm able to only set drag and drop only on rows or only on cells but not on both. I want to make the row draggable and also each cell. That's the…
rami-sf
  • 119
  • 1
  • 10
0
votes
0 answers

Angular Material (cdkDragMoved) not working correctly

I tried to bind the x and y position to the svg circle. It works fine with (cdkDragEnded) but it does not work with (cdkDragMoved). On onDragMoved i get really high values for x and y position when i only drag the circle a little bit. HTML:
Robin
  • 1
0
votes
0 answers

CdkDragDrop removing item from source on entering to destination while dragging

I want to copy item from A to B without hampering A at all. I am using copyArrayItem method for the same. When I am dragging item from a to B, then that item is getting removed from A before it is dropped into B. How can I prevent that behavior…
jitenderd
  • 181
  • 3
  • 15
0
votes
2 answers

I'm having a problem getting the cdkDragDrop to place the checker in the new spot

If I take off the cdkDropList, the checker moves and stays where I move it. If I add the cdkDropList it will move and then go back to its original position. I need to keep the cdkDropList in order to be able to get the event.containter.data and the…
mwave317
  • 11
  • 6
0
votes
3 answers

What is the best practice to delete a div in Angular with the event.clientX and y coordinates?

I have 64 divs created dynamically for a checker game. When I jump a checker, I need to be able to delete the jumped checker. How would I track the checkers to be able to delete a jumped checker? All of the divs and images have ids. Since I'm using…
mwave317
  • 11
  • 6
1 2 3
…
11 12