Get started with angular-dragula CDN

import { Component } from '@angular/core';
import Dragula from 'dragula/dist/dragula';
import 'dragula/dist/dragula.min.css'; // Add this line for dragula styling

declare var Dragula: any;

@Component({
  selector: 'app-dragula',
  template: `
    <div id="container" [ngClass.dragula-container]="true">
      <div draggable="true" class="draggable-item" *ngFor="let item of items" id="{{ item.id }}">{{ item.name }}</div>
    </div>
  `,
  styles: [`
    .dragula-container { height: 200px; border: 1px solid lightgray; }
    .draggable-item { width: 100px; height: 50px; margin: 10px; background-color: lightgray; text-align: center; line-height: 50px; }
  `]
})
export class DragulaComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' }
  ];

  ngOnInit() {
    const container = document.getElementById('container');
    const dragulaContainer = new Dragula(container);

    dragulaContainer.on('drag', (el) => {
      console.log('Dragging:', el.innerText);
    });

    dragulaContainer.on('drop', (el) => {
      console.log('Dropped:', el.innerText);
      const droppedItemIndex = this.items.findIndex(item => item.id === parseInt(el.id));
      const previousItemIndex = this.items.findIndex(item => item.id === parseInt(el.previousElementSibling?.id));
      [this.items[droppedItemIndex], this.items[previousItemIndex]] = [this.items[previousItemIndex], this.items[droppedItemIndex]];
    });
  }
}