The Angular framework always initializes the list items in CDK drop List starting from the initial index

Currently, I am working with the cdk Drag drop feature

<div class="example-container" cdkDropListGroup>
To properly understand and describe data, it is crucial to be aware of the level of variability. This can be determined by analyzing the measures of dispersion.
<div cdkDropList [cdkDropListData]="done" class="example-list" cdkDropListSortingDisabled (cdkDropListDropped)="drop($event)">
<div class="example-box drobtnstyle" cdkDrag>{{ done[0] }}</div>
</div>
,
<div cdkDropList [cdkDropListData]="done" class="example-list" cdkDropListSortingDisabled (cdkDropListDropped)="drop($event)">
<div class="example-box drobtnstyle" cdkDrag>{{ done[1] }}</div>
</div>
    
, and
<div cdkDropList [cdkDropListData]="done" class="example-list" cdkDropListSortingDisabled (cdkDropListDropped)="drop($event)">
 <div class="example-box drobtnstyle" cdkDrag>{{ done[2] }}</div>
 </div>
 are commonly utilized measures of dispersion in data analysis.
<div cdkDropList [cdkDropListData]="todo" class="example-list" cdkDropListSortingDisabled="true"   (cdkDropListDropped)="drop($event)">
<button class="example-box btn drobtn2 " *ngFor="let item of todo" cdkDrag>{{ item }}</button>
</div>
</div>

Link : https://stackblitz.com/edit/angular-xnirx8?file=src%2Fapp%2Fapp.component.html

In this setup, there are three empty slots where users can place any of the 'todo' items into done[0], done[1], and done[2]. However, an issue arises when placing an item in the done[2] slot causing it to revert back to the done[0] position automatically.

If you have a solution for this specific issue, your input would be greatly appreciated. Thank you!

Answer №1

One approach could be to utilize three separate arrays for the three distinct completed lists

done1 = [];
done2 = [];
done3 = [];
<div
    cdkDropList
    [cdkDropListData]="done1"
    class="example-list"
    cdkDropListSortingDisabled="true"
    (cdkDropListDropped)="drop($event)"
>
    <div class="example-box" cdkDrag *ngFor="let i of done1">{{ i }}</div>
</div>
<span>, are the three commonly used measures of dispersion.</span>
<div
    cdkDropList
    [cdkDropListData]="done2"
    class="example-list"
    cdkDropListSortingDisabled="true"
    (cdkDropListDropped)="drop($event)"
>
    <div class="example-box" cdkDrag *ngFor="let i of done2">{{ i }}</div>
</div>

<span>, and are the three commonly used measures of dispersion.</span>
<div
    cdkDropList
    [cdkDropListData]="done3"
    class="example-list"
    cdkDropListSortingDisabled="true"
    (cdkDropListDropped)="drop($event)"
>
    <div class="example-box" cdkDrag *ngFor="let i of done3">{{ i }}</div>
</div>

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

How can I arrange selected options at the top in MUI autocomplete?

I am currently working with mui's useAutocomplete hook https://mui.com/material-ui/react-autocomplete/#useautocomplete Is there a way to programmatically sort options and place the selected option at the top using JavaScript sorting, without resorti ...

Tips for toggling visibility in Angular 2

I utilized [hidden] in the following way where the value of "secondTab" is set to true. <form #siteForm="ngForm" novalidate (ngSubmit)="saveSite(siteForm.value,siteForm.valid)" class="admin-modal"> <div class="txt-danger">{{errorMessage}}&l ...

Obtaining data from a cookie or service within the app-routing module

My angular site, www.domainname.com, utilizes an app-routing module with the following Routes: const routes: Routes = [ { path: "homepage/:lang/:country", ... }, ... { path: "**", redirectTo: "/homepage/en/gb", pathMatch: "fu ...

Encountering issues while retrieving date data from Firebase in Angular 6

this.qS = this.afDatabase.list('path', ref => { return ref.limitToLast(1000); }).snapshotChanges().map(changes => { return changes.map(c => ({ key1: c.payload.key,value1:c.payload.val() })); }); this.qS.subscribe(values =&g ...

Angular app experiences a breakdown due to a JitCompiler issue

After being given the responsibility of enhancing a project, I diligently added new modules and components. However, upon running the application, it crashes. Uncaught Error: Component EnquiryComponent is not part of any NgModule or the module has not bee ...

Exploring the features of the window object in an Angular application compiled ahead of time

In an effort to streamline our development process and avoid having to build the Angular-App multiple times for different environments, we decided to skip injecting environment-specific variables (such as service endpoints) into our app using regular file ...

Tips for showing an image through a button in Angular 4

Currently, I am in the process of creating a simple website and I have encountered an issue. When I click on a button to display an image, it works fine. However, when I click on another button to display a different image, the previous image remains visib ...

Keep displaying the default angular loading screen until the angular2 router is fully resolved

Angular2 CLI has a default loading screen that displays until the app gets bootstrapped with <app-root>Loading...</app-root>. Once this is done, the Angular2 route resolver makes an API call to verify whether the user is authenticated before n ...

Obtain an array containing various directives in a specific sequence

I am looking to extract directives from the view or content in the exact sequence they were specified in the template. First Attempt [view plunker] @Directive({selector: 'dir-1'}) class Dir1 {} @Directive({selector: 'dir-2'}) class Di ...

Perform a calculation where two numbers are multiplied together and the result is added to a third number

I'm just getting started with functional programming and I'm attempting to create a function that multiplies two numbers together and then adds the result to a third number using TypeScript with rambda. My goal is to have a function that takes t ...

Uploading Boolean Values from Switch Input (React/Typescript)

I'm facing an issue while trying to post the state value of a switch input toggle control. Whenever I use the submitRecommendation() function through a button click, I encounter a JSON parse error: Cannot deserialize instance of `boolean` out of START ...

Is Webpack capable of adjusting public paths dynamically?

Currently, I have an application running on express js and angular 2. To bundle my modules, I am using webpack and utilizing webpack dev middleware to run webpack with express. In order to serve the index.html file for all routes, I have configured a wild ...

Issue: ALERT found in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib?

Hello to all my fellow developers! I've been diving into the Angular 6 project recently and things are going smoothly for the most part. However, I keep encountering a warning in the console after running the application with (ng serve). WARNING i ...

Issue with Typescript - Node.js + Ionic mobile app's Angular AoT build has encountered an error

Currently, I am in the process of developing an Android application using Node.js and Ionic framework. The app is designed to display random text and images stored in separate arrays. While testing the app on Chrome, everything works perfectly fine. Upon ...

Error in Angular 5: Google Maps not defined

Having trouble implementing Google Maps on my Angular 5 app. Upon loading the view, I am encountering this error in the JavaScript console: LoginComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: google is not defined at LoginComponent.ngAfterVie ...

Unable to process JSON request in Node.js

I have the following data in Angular that I need to pass to a Node API. The data includes a JSON object that is being sent to the Node API using the POST method. var myData = { "que": { "id": 1, "status": 1, "option": [ ...

What is the best way to alter the Date format in Typescript?

Within my response, the field createdate: "2019-04-19T15:47:48.000+0000" is of type Date. I am looking to display it in my grid with a different format such as createdate: "19/04/2019, 18:47:48" while maintaining its original data type. To achieve this, I ...

Ways to display collapse content and hide it again with a click

Working on my Angular 2 project, I have created collapsible tabs. When a button is clicked, the corresponding tab collapses, and I want it to be hidden if the same button is clicked again. However, the tabs are generated dynamically or through looping: Th ...

The test session failed to launch due to an error in initializing the "@wdio/cucumber-framework" module. Error message: [ERR_PACKAGE_PATH_NOT_EXPORTED]

I added @wdio/cli to my project using the command 'npm i --save-dev @wdio\cli'. Next, I ran 'npx wdio init' and chose 'cucumber', 'selenium-standalone-service', 'typescript', 'allure' along w ...

Issues with Angular 2 template not refreshing during testing

I'm struggling to get this to function properly. it('should have the expected <h1> text', async(() => { let fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const sectionEl = fixture.debugElement.que ...