typescript - Angular 7 instalando y usando arrastrar y soltar sin Material

Estoy usando Angular 7 para un proyecto y quiero usar la función de Arrastrar y Soltar.

Leyendo la documentación, me está obligando a instalar Angular Material, que es algo que no quiero instalar ni usar.

Dicho esto, ¿cuáles son mis opciones aquí?

¿Puedo no instalar la función de arrastrar y soltar sin instalar Angular Material?

Si es así, ¿cuál es mi mejor alternativa?

Respuesta #1

npm install --save @angular/cdk

Html

<div class="row">

<div class="col-md-6">
    <div cdkDropList [cdkDropListData]="list2" [cdkDropListConnectedTo]="firstList" #secondList="cdkDropList" (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of list2" class="pop" cdkDrag>{{item}}</div>
    </div>
</div>
<div class="col-md-6">
    <div cdkDropList [cdkDropListData]="list1" [cdkDropListConnectedTo]="secondList" #firstList="cdkDropList" (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of list1" class="pop" cdkDrag>{{item}}</div>
    </div>
</div>
</div>

script MóduloDeAplicación

import { ModuleWithProviders, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DragDropModule} from '@angular/cdk/drag-drop';
@NgModule({
imports: [
    SharedModule,
    DragDropModule
],
declarations: [
    AppComponent       
],
 providers: []
})
export class AppModule { }

Appcomponent.ts

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

 @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
 })

 export class AppComponent {
 constructor() { }

 list1 = [
    "item 1",
    "item 2",
    "item 3",
    "item 4",
    "item 5"
 ];

 list2 = [
    "item 6",
    "item 7",
    "item 8",
    "item 9",
    "item 10"
 ];

 drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer !== event.container) {
    transferArrayItem(event.previousContainer.data,event.container.data,
    event.previousIndex, event.currentIndex)
    } else {
    moveItemInArray(this.list1, event.previousIndex, event.currentIndex);
    }
 }
}

Respuesta #2

Intenta instalar cdk: npm install --save @angular/cdk Y usa el módulo CDK Drag Drop, documentación oficial