70 questions
0
votes
1
answer
290
views
Angular Drag & Drop with nested section and subsection
I am trying to implement a drag-and-drop feature in my Angular 14 Application where I have nested sections and subsections. I want to move each section up or down and subsections will be moved between ...
- 171
0
votes
2
answers
1k
views
Drag n Drop Flowchart Buiilder in Angular
Need to Create a full-fledged drag-and-drop flowchart builder with arrow connections in angular,
I have tried drag n drop feature of todo and done example using material angular version 16 in angular ...
- 1
2
votes
1
answer
1k
views
Angular Material Drag and Drop - How to Add a new Item to the list and have it recognized correctly?
I am trying to utilize the Angular Material Drag and Drop functionality here: https://material.angular.io/cdk/drag-drop/api
I'm following the example here: https://material.angular.io/cdk/drag-drop/...
- 2,381
3
votes
1
answer
2k
views
Angular drag and drop with nested not working as intended
I'm having an issue that CDK Drag and Drop is not working as how I want it to be.
There is one scenario that I can't get it working and that is moving and IT (green object) inside a different (green ...
- 481
0
votes
0
answers
382
views
Angular - drag and drop - component is not rendering before drag start
I am using angular drag and drop @angular/cdk/drag-drop.
Here is a stackblitz that describes the problem:
https://stackblitz.com/edit/cdk-drag-drop-index-bug-kqspbh?file=src%2Fapp%2Fapp.component.html
...
1
vote
0
answers
633
views
Angular CDK drag and drop multiple nested cdkDropList not working
I have been working on a form builder using Angular CDK drag and drop, and I'm facing an issue with nested drag areas. I have successfully implemented drag and drop functionality without nested lists, ...
0
votes
0
answers
407
views
ngx-drag-drop not compatible with primeng?
I am trying to implement ngx-drag-drop but issue is I am using PrimeNG and sample is given using Angular Material list component is there any possible way I can modify code so that it gets compatible ...
3
votes
1
answer
1k
views
Can’t bind to “cdkDropListData” since it isn’t a known property of ‘div’.?
I’m trying to use Drag-Drop event in Angular with CDK but when I tried to import codes to my projects (imports etc.) the terminal says Can’t bind to “cdkDropListData” since it isn’t a known property ...
- 33
0
votes
2
answers
2k
views
Stuck more than 2 hrs Angular CDK Drag and Drop - Not able to drop the item in the location
Am Struggling lot to complete my task as newly started into Angular CDK DragnDrop. When trying to drag the image item and drop into location, I got Cannot read properties of undefined (reading 'length'...
- 123
1
vote
1
answer
275
views
Reactive form working so weird with Angular DropnDrop CDK - Items getting duplicated
I've a form where user can drag selected img and drop it in target location and submit the form to backend.
Source data is Array of Object(API),
Issue:
when drag one item and put it in drag location, ...
- 123
0
votes
1
answer
1k
views
PrimeNG Order list - set handle item
I am using PrimeNG Order List with drag and drop functionality enabled.
<p-orderList [value]="form" [dragdrop]="true">
<ng-template let-form pTemplate="item"&...
- 69
0
votes
1
answer
3k
views
Display selected value from drop down list in Angular 13
Here's my code:
<tbody *ngFor="let user of users">
<td>{{user.name}}:</td>
<td>
<ng-select [items]="userList" bindValue="id" ...
- 2,616
0
votes
0
answers
2k
views
Angular - drag and drop from multiple containers doesn't work if one is a parent of another
I have a planner style of application, which has 2 columns. Both have multiple expansion panels and I can drag and drop from the left one to the right one. The catch is I want drag and drop to work on ...
- 443
1
vote
0
answers
122
views
CdkDragDrop Drop not working with "ng build --prod" configuration
I am using cdkDropList of Angular material CdkDragDrop. Drag is working but drop is not working.
It is only happening when I am using "ng build --prod". I tried with removing all default ...
- 31
1
vote
1
answer
2k
views
Angular drag and drop, exit event, get data of removed item
I'm trying to get value or index of the item removed from the source list using the "cdkDropListExited" event. I do see the event getting fired but the "event.item.data" keeps ...
- 611
0
votes
1
answer
888
views
Angular Nested Drag And Drop
I'm trying to build a nested drag and Drop, I have a "root" directory that contains records and directories. Each directory can contain more records, I used CDK Material Drag and Drop for ...
1
vote
2
answers
3k
views
how place the select (dropdown) elements from backend in angular formly
I am new to the angular formly .My requirement is to place the cities (coming from the backend )in dropdown but I have tried but I am unable to do this.
.service.ts
getcitiNames(): Observable<any&...
- 27
4
votes
1
answer
2k
views
Drag and Drop: by using copyArrayItem() the dragged item should not be removed from start array while drop Angular 8
I have a list of items from where I drag an item and drop it into another list. I'm using copyArrayItem() method from Angular to not remove the item from the previous array.
I start dragging, the item ...
- 141
12
votes
1
answer
4k
views
angular cdk drag drop - adjust autoscroll speed when dragging
UPDATE 11.07.2020
Issue on Github https://github.com/angular/components/issues/19401
ORIGINAL POST
Is there a way to adjust the scroll speed when dragging an item down or up the list?
In Firefox on ...
- 8,579
1
vote
2
answers
3k
views
Angular drag-drop
I need some reference for angular drag and drop, I went through the angular documentation but it's not working, I need to develop a page where I can drag tools to my canvas in angular.
If anyone knows ...
- 517
0
votes
1
answer
244
views
Dragable grid angular
I create a grid which can be reorder using angular cdkdrag the code like this
<div class="col-lg-12" style="display: flex;flex-direction: row;flex-wrap: wrap;">
<div class=...
- 368
2
votes
1
answer
2k
views
integrate formio api with my angular project
Source code in git
Live Demo
I want to develop Angular8 drag and drop form builder functionality in my angular application
In the above git code it is developed using pure formio
My requirement ...
- 185
2
votes
0
answers
302
views
angular drag and drop reusable components
In this angular drag and drop example the component is just moving
But I need to keep the original file and generate N number of copies and move them.
I need the test box in the left and draggable ...
- 185
0
votes
1
answer
710
views
Drag and drop list - not working with my data structure (stackblitz included)
I decided to make smaller implementation from my big project. At this moment i trying to rework list for drag&drop functionality. In my project i see names on list but can't drag and drop anything....
- 1,165
0
votes
1
answer
2k
views
Drag an drop with array of objects
I have two arrays of objects, an A and a B.
I have a kind of list of each one and I intend to drag the objects from A to B and from B to A.
My problem is that when I drag all objects from A to B or ...
- 105
0
votes
1
answer
92
views
Dropdown angular
I want to do a drop down in angular, but I received only the first item from the list in the drop down.
<div class="form-group">
<h4>Projects</h4>
<div *ngFor="let ...
- 522
0
votes
1
answer
871
views
How do I update a variable in Angular when dragging from a specific droplist using CdkDragDrop?
I am using Angular 8 with Material drag&drop. I have multiple droplists linked to three destination droplists. In my StackBlitz example here, I would like to allow only one item from the list ...
- 79
1
vote
1
answer
2k
views
Drag Drop inside nested drop zone Angular
I am trying to create a drop zone inside another drop zone, and i want the ability to drop in both drop region. To achieve that i have tried using "cdkDropListConnectedTo" To be the id's of all the ...
- 89
0
votes
2
answers
2k
views
How to save order of Angular reordered list that I get from the back-end
When a user opens the page they are shown a list, which they can reorder thanks to angulars drag&drop. The problem ofcourse is that the front-end order changed but not the back-end order. What ...
- 449
4
votes
4
answers
10k
views
How to limit drag - drop container to accept only one item in Angular Material Drag-Drop Feature
When using @angular/cdk/drag-drop module (Angular Material Drag and Drop)... Is there any way to limit drop container so to accept only one value instead of multiple values? I am trying to create form ...
- 957
1
vote
2
answers
3k
views
cdkDragFreeDragPosition position depends from each previous cdkDrag element
When i adding few cdkDrag elements on page, position each of them depends from previous element.
Looking on my screen, if i move "Item 3" to 0x0 of container, "Item 3" coordinates will -250x0.
So ...
- 811
1
vote
1
answer
4k
views
Angular CDK Drag and drop with placeholders in one of the drop lists
I am struggling with the following use case for Angular CDK Drag and Drop: I want the second drop list to be an array with empty elements when the component loads (because I want to have a number of ...
- 710
0
votes
0
answers
327
views
How to drag drop an angularJS element using selenium webdriver
I need to drag an element from one location to other using the selenium webdriver for angula6 element
I have tried using
Actions act = new Actions(driver);
act.dragAndDrop(from, to).build().perform()...
- 21
1
vote
0
answers
411
views
Drag and drop inside child document in an iframe not working
I have a angular app enclosed inside a plain html app using iframe (object tag). In the child angular app I am trying to drag and drop text between input elements like text fields. The dragging of ...
- 505
1
vote
1
answer
3k
views
Angular mat tree with drag and drop
I am using angular material flat tree for drag and drop.
I implemented drag and drop using an example from stackblitz link.
I'm getting an error when i drag and drop parent node to child node.
...
- 1,984
1
vote
2
answers
1k
views
angular cdk drag and drop not working in lazy-loading
I Switched to lazy-loading feature when it came out on angular 7, before that, the cdk drag and drop used to work, now its broken.
there are some shared modules that I use in my code for ...
- 43
0
votes
1
answer
1k
views
Angular8 drag and drop problem with drag and drop with multiple cases
I am working with Angular8 Drag and Drop and come across some problem
What is my concept and what I am doing
Truck in which I drag and drop deliveries
Deliveries in which I drag and drop packages
...
- 379
4
votes
2
answers
2k
views
angular cdk drag drop - is there any way to async validate on drop and revert if validation returns false?
When droping an item I want to be able to perform an async call (e.g. check with backend for conflicts, collisions and so forth...) which returns true or false. If false, I want to "reverse" the drop ...
- 8,579
9
votes
5
answers
6k
views
In Angular Material CDK Drag Drop, How to Prevent Items from Automatically Rearranging as an Element Moves?
Thanks in advance. Here's the issue:
I'm using Angular Material CDK Drag Drop (version: @angular/ckd: 7.3.7)
The documentation says "Items will automatically rearrange as an element moves."
My ...
- 105
0
votes
1
answer
111
views
unable to perform drag and drop of div elements
Actually i have scenario like, i have four divs & i should able to swap the div squares ,means i can interchange the position of div with each other without any error.while doing so mycode is not ...
7
votes
3
answers
19k
views
drag-drop not found in @angular/cdk
i am trying to add the drag-drop feature in my Angular 6 application
where i am trying to use angular material
this is the overview link which i want to use. I followed the getting started instruction'...
- 304
4
votes
1
answer
3k
views
cdkDropListSortingDisabled property can't bind since it's an unknown property of cdkDropList Directive. ANGULAR-MATERIAL
So I want to implement a use case, I want to copy some data from a zone (div) to the other zone using drag and drop, I found by surfing on the net that angular/material2 could do the work, by ...
- 41
8
votes
2
answers
8k
views
Angular Drag drop with formArray
I have 2 arrays. I'm implementing an Angular drag drop and I want to use FormArray to save the array in which the element was dropped into.
The problem is that I can't apply formcontrol to the div ...
- 1,133
2
votes
1
answer
17k
views
How restrict the drag element between one boundary in Angular Material 7 CDK?
For my current project am trying to implement the drag element one position to another position inside one div. For this I am using the Angular Material 7 CDK drag and drop features. it dragging all ...
- 1,594
1
vote
1
answer
9k
views
Drag and Drop with sorting it is possible in Angular Material?
Scenario :
From Angular Material cdk version 7.0.3 we have Drag&Drop sorting. In that Drag&Drop, everywhere in that div we can click and drag.
Without click everywhere, only icon will be ...
- 97
1
vote
0
answers
251
views
Problems to attach file in input with drag & drop
I have this code to drag and drop images in a file type input.
With this code I get a preview of the image in the label. It works perfectly using the button, but it does not work if I drag and drop.
...
-1
votes
1
answer
268
views
use filter filter in angular dragdrop
here is a plunkr to illustrate my issue.
https://plnkr.co/edit/SdRii7l7Wsf9rbuM6byc?p=preview
when applying a filter filter to my angular collection (filling in the search box) then dragging the ...
- 5,432
2
votes
1
answer
897
views
angular dragdrop drag across ng repeat elements
here is the plunkr which will best illustrate my problem.
https://plnkr.co/edit/VrT7TmK6tY2u4k2NYJ2U?p=preview
there are two panels the panel on the left has a list of items that you can drag and ...
- 5,432
3
votes
1
answer
744
views
Drop and Add Item in a mouse positions | angular-dragdrop
Used https://github.com/codef0rmer/angular-dragdrop
I'm looking for a way to add an item to a list in a drop position.
How can I do that?
I tried to do that without success
<div ui-sortable ng-...
- 1,459
4
votes
1
answer
599
views
Angular Drag and Drop pass in Parameter within jqyoui-draggable
I am using angular drag and drop, but i am having trouble passing a parameter in with onStart, onDrag, onDrop or onStop to the controller. I have a number of different variations like below but ...
- 115