Questions tagged [angular-cdk-drag-drop]

168 questions
0
votes
1 answer

How to find on which element value dropped?

I am trying to do simple drag and drop calculation. user can drag UP and allowed to drop on BH / OT. But issue is couldn't find the ID where user drop, not working onDrop() func. Suppose if UP(10) value draged and drop on BH(2), desire updated UP…
0
votes
1 answer

Angular CDK Drag Drop: Get X and Y position on dropped element with respect to its parent

I am building an Angular app. I have bunch of dragable elements on left side and a dropzone on the right side. when I drag and drop the element into the dropzone. I need to know where exactly the element was dropped inside the dropzone. I have tried…
0
votes
1 answer

Weird ouput when displaying an array in Angular

i am making a todo app in Angular with Angular Material. I made it so i have 2 inputs field for a todo, title and description. they get put into an array and this array is displayed in a cdkDropList. when i write something into the input fields my…
0
votes
0 answers

angular cdk drag and drop all events stoped working all of sudden in between drag and drops

created a card game named durak with cdk drag and drop and Firestore its working fine but in some cases if any opponent player made any changes in the Firestore document and the primary player is dragging any card in that moment then all the events…
0
votes
1 answer

Angular CDK Drag element displaced if parent has translate3d

I'm using "@angular/cdk": "^15.2.4" and having difficulties figuring out how to resolve the problem in the title. That is, I have some parent DOM element coming from an external library that gets a transform: translate3d(); applied, and I have some…
Sleeper9
  • 1,707
  • 1
  • 19
  • 26
0
votes
0 answers

drag-drop: make the view scroll when trying to move a draggable outside the current view

When trying to drag a cdkDragItem outside of the view, it does not scroll to show the rest of the cdkDrop div / the rest of the page.
Arjun Ghimire
  • 233
  • 1
  • 6
0
votes
0 answers

unable to prevent movement of items while dropping in target container

I'm using cdkdragdrop
This is my source
  • ...
  • This…
    user3653474
    • 3,393
    • 6
    • 49
    • 135
    0
    votes
    0 answers

    Create a dock using angular CDK

    I've been trying to build a Docking Panels component for angular, using @angular/cdk/drag-drop and Portals, something like this demo (github). Sadly this isn't open-source and you have to pay for it... Angular CDK contains a drag/drop module, and I…
    Pieterjan
    • 2,738
    • 4
    • 28
    • 55
    0
    votes
    0 answers

    CDK drag and drop from mat-list to table

    I am trying to implement the drag and drop functionality between a list/tree and a table. I have seen many examples of drag and drop from list to list and table to table but no examples for my use case. I also need to make sure the items are added…
    0
    votes
    1 answer

    cdkDragEntered not working on entering a cdkDrag item

    can anybody tell me why cdkDragEntered is not firing the event? Html: html
    drag area
    0
    votes
    0 answers

    Angular Material Table drag and drop not working correctly with wide rows

    I have a little problem with my mat-table. Here it is the essential part of the HTML.
    0
    votes
    0 answers

    Limit dropzones in Angular CDK drag&drop

    I haven't used Angular CDK drag&drop before and it seems to do what I need in this stackblitz
    Jeanluca Scaljeri
    • 26,343
    • 56
    • 205
    • 333
    0
    votes
    0 answers

    How to use Angular cdk drag & drop for position exchange and free drag?

    When I move the serial number 2 to 1, it can exchange positions, but 2 cannot move freely between 1 and 3, and if I move 3 out of the myaudioselect width range, the scroll bar cannot appear!
    0
    votes
    0 answers

    Angular [CDK v12+] cant find a proper replacement for "enter" deprecated function in drag and drop CDK

    this.placeholder.enter( drag, drag.element.nativeElement.offsetLeft, drag.element.nativeElement.offsetTop ); error: Property 'enter' does not exist on type 'CdkDropList' I wish to transfer this functionality to the latest CDK version…
    0
    votes
    0 answers

    Drag and drop for custom screen option

    I need to create a custom screen option with angular When there are places on the screen that can be dragged and dropped to another place. Similar to what you see in known editors. And I want that during the towing, as soon as you pass any place…
    OrYo
    • 83
    • 1
    • 9