Drag and drop

Local Storage

Gist:

Az Angularban a drag-and-drop (fogd és vidd) funkcionalitást könnyedén meg lehet valósítani az Angular CDK (Component Development Kit) segítségével. Az alábbi lépésekben bemutatom, hogyan implementálható a drag-and-drop funkció a list-group-item elemekre.

1. Telepítse az Angular CDK-t:

   ng add @angular/cdk

2. Importálja a DragDropModule modult az Ön moduljában, ahol a lista van:

   import { DragDropModule } from '@angular/cdk/drag-drop';

   @NgModule({
     imports: [
       // ... other imports
       DragDropModule
     ],
     // ...
   })
   export class YourModule { }

3. Implementálja a drag-and-drop logikát a komponensben:

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

// ... your component metadata

export class ShoppingListComponent {
  // ... other members

  onDrop(event: CdkDragDrop<string[]>): void {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}

4. Adja hozzá a drag-and-drop direktívákat a HTML kódhoz:

<ul class="list-group" cdkDropList (cdkDropListDropped)="onDrop($event)">
  <li *ngFor="let item of items; let i = index" 
      class="list-group-item" 
      cdkDrag>
    <!-- your item content here -->
  </li>
</ul>

Ezzel a list-group-item elemek most már áthelyezhetők a listán belül.

Megjegyzés: Az Angular CDK drag-and-drop funkciója alapvetően csak a listán belüli áthelyezést támogatja. Ha két különböző listát szeretne összekapcsolni, vagy bonyolultabb áthelyezési logikára van szüksége, akkor további konfigurációra és kódra lehet szükség.