Transfer items on a list by dragging and dropping them onto the navigation label of the target component

I'm currently exploring how to move an element from a list to a <div> and then see it transferred to another list.

The objective is to allow users to drag items from one list onto the labels in a sidebar navigation, causing the item to switch to the list on that specific destination page.

I made an attempt at creating a basic proof of concept on stackblitz, but unfortunately, it didn't work as expected.

Is it feasible to drop an item onto a designated div (even if it doesn't display a list) and have the item shift lists?

You can view my stackblitz implementation here: https://stackblitz.com/edit/angular-special-drop-zone

In the stackblitz example, I am aiming to enable dropping items from the TODO list onto the DONE header and having them automatically added to the DONE list.

UPDATE: You can check out this GIF to get a clearer idea of my goal. After dragging an item onto 'Backlog' in the side nav, it should switch over to the backlog list.

https://i.sstatic.net/aRYfA.gif

angulartypescriptdrag-and-dropangular-cdk

Answer №1

Summary:

Include all the necessary cdkDrop* attributes to the designated div for dropping items, even if the list is not visible. Ensure that it shares the same cdkDropListdata as the visible list. View stackblitz examples for clarification.

I have discovered two methods to resolve this issue. Both methods involve treating the drop area <div> as an independent cdkDropList.

1. Utilizing cdkDropListConnectedTo

Refer to: https://stackblitz.com/edit/ng-cdkdroplistgroup

Stackblitz example:CdkDropListConnectedTo Example

Connect the main list to the hidden 'drop' list (simple div/label) using cdkDropListConnectedTo.

2. Employing cdkDropListGroup

Documentation available at: See Documentation

View Stackblitz example: CdkDropListGroup Example

Apply the cdkDropListGroup directive to a div containing all lists intended for drag-and-drop functionality. They will automatically connect similar to using cdkDropListConnectedTo, each with unique identifiers.

To allow dropping on a label resulting in inclusion within a list, follow the previous steps of sharing the same cdkDropListdata property between the visible list and label.

In scenarios where the label and visible list are in separate components fetching data from services or observables, handle the drop event to manually update the lists instead of solely relying on transferArrayItem(). If components are subscribed to changes, the functionality remains consistent.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges encountered when setting a value to a custom directive via property binding

I'm working on a question.component.html template where I render different options for a specific question. The goal is to change the background color of an option to yellow if the user selects the correct answer, and to red if they choose incorrectly ...

angularangular-directive

Guide to simulating Twilio with Jest and TypeScript to perform unit testing

Please assist me in mocking a Twilio service that sends messages using Jest to mock the service. Below is the code I am working with: import { SQSEvent } from "aws-lambda"; import { GetSecretValueResponse } from "aws-sdk/clients/secretsmanag ...

javascripttypescriptunit-testingjestjstwilio

The unique Angular type cannot be assigned to the NgIterable type

As a newcomer to Angular, I was introduced to types and interfaces today. Excited to apply my new knowledge, I decided to enhance my code by utilizing a custom interface instead of a direct type declaration: @Input() imageWidgets: ImageWidget; Here is the ...

angulartypescripttypesinterface

Universal Parameter Typing in Functions

I'm grappling with a concept that seems obvious to me, yet is disallowed by Typescript when all strict flags are enabled (presumably for valid reasons). Let me illustrate: We all understand the following: export interface Basic { value: "foo&q ...

typescripttypescript-generics

Ways to transfer specific properties from one object to another in TypeScript

I'm currently working on a function that selectively copies key-value pairs from one object to another in order to remove certain properties. The code snippet for this function is shown below: sanitizeData: function (sourceObject: object, ...allowedKe ...

typescript

struggling with configuring dependency injection in NestJS and TypeORM

Struggling with integrating nestjs and typeorm for a simple CRUD application, specifically facing issues with dependency injection. Attempting to modularize the database setup code and import it. Encountering this error message: [ExceptionHandler] Nest ...

typescriptdependency-injectionnestjs

Error: "Access-Control-Allow-Origin" header is missing in Firebase Function

I have encountered an issue with my firebase functions GET request. While I am able to receive data using Postman, I am facing difficulties when trying to fetch data from my front-end application. Upon accessing the endpoints, I am seeing the following er ...

javascriptnode.jsangularcors

Dependencies of generic types among function arguments

Exploring the implementation of binding in a game engine, I aim to incorporate a touch of typing. /** Engine external functions */ export type Message<TBody> = { } // This function returns the same unique object for the same `s` // An internal engi ...

typescriptgenericstypes

The object must contain a property 'children', which is required in the type '{ children: any; }' but missing in the type '{}'

While learning React from a variety of sources, I've encountered an issue with one of the examples. Error message: Property 'children' is missing in type '{}' but required in type '{ children: any; }' export default fu ...

reactjstypescript

Expecting null in Angular2/Jasmine tests can lead to browser crashes

I'm currently experiencing issues with testing a particular component. Here is the test that I am running: describe('SmpEventsNewCompactEventComponent', () => { const specService: SmpSpecService = new SmpSpecService(); describe(&ap ...

unit-testingangularcrashjasmine

Prisma: Utilizing the include option will retrieve exclusively the subobject fields

I created a function to filter the table building and optionally pass a Prisma.BuildingInclude object to return subobjects. async describeEntity(filter: Filter, include?: Prisma.BuildingInclude): Promise<CCResponse> { try { const entity = await ...

typescriptprisma

Solving the issue where the argument type is not assignable to the parameter type

I am attempting to filter an array of objects in React using TypeScript and encountered this error. Below is my interface, state, and function: TS2345: Argument of type '(prev: IBudget, current: IBudget) => IBudget | undefined' is not assigna ...

reactjstypescriptfiltertypesreduce

What is the process for incorporating TypeScript types into a JavaScript library?

After adding p5 and @types/p5 to my project, I imported p5 in the following way: import * as p5 from 'p5' However, when I tried using p5.createImage(100, 100), I encountered this error message indicating that 'createImage' is not a re ...

typescripttypesmodule

Resolving TypeScript error when importing images statically in Next.js

In order to enhance the performance of images in my nextjs app, I am working on image optimization. However, I encountered an issue stating: Cannot find module '/images/homeBg.jpg' or its corresponding type declarations. The image is actually st ...

typescriptnext.jsnextjs-image

Error in uploading files with Node.js, Multer, and Angular - issue with setting headers after they have already been sent

Working with Angular 5, Node.js, and Multer to upload a file. The process involves first saving the file to a directory and then inserting the path into the database. To begin, I created a form: <input type="file" (change)="onFileSelected($event)"> ...

node.jsangularuploadmulter

Error message "After the upgrade to Angular 15, the property 'selectedIndex' is not recognized in the type 'AppComponent'."

My Ionic 6 app with capacitor has been updated in the package.json file. These are the changes: "dependencies": { "@angular/common": "^15.1.0", "@angular/core": "^15.1.0", "@angular/forms": "^15.1.0", "@angular/platform-browser": "^15.1. ...

javascriptandroidangulartypescriptionic-framework

Developing web applications with Angular 6, C#, and MVC involves dynamically generating and returning JsonResults from the controller in the form of

I have been working on exporting datasets to Excel within an Angular 6 application. To achieve this, I have been utilizing XLSX and File-save functionalities as outlined in the following example: https://medium.com/@madhavmahesh/exporting-an-excel-file-in- ...

c#jsonangularasync-awaitdataformat

Angular offers pre-determined values that cannot be altered, known as "

I am currently learning Angular and TypeScript, and I came across a task where I need to create an object or something similar that allows me to define a readable but not editable attribute. In Java, I would have achieved this by doing the following: publ ...

typescript

Using TypeScript to sort objects based on keys and convert an array of objects into a different object type

I'm facing an issue where I need to filter the objects within an array of objects based on keys and convert them into a different type of object. I attempted to solve it like this... const values = Object.keys(user).map((key) => {'refKey' ...

javascriptarraysangulartypescript

Issue Detected: The function this.route.params.flatMap is not recognized

Seeking guidance on transitioning to id, or a similar concept that's hard to articulate. Upon clicking a button to navigate to a specific user, encountering the following error: ERROR TypeError: this.route.params.flatMap is not a function at UserSho ...

javascriptangular