Install ng2-dragula using npm

ng2-dragula

npm install ng2-dragula --save

Include dragula.css in angular.json

../node_modules/dragula/dist/dragula.css

Add DragulaModule into your UIComponentsModule class. ui-components.module.ts would look like this

import {NgModule} from '@angular/core';
import { DragulaModule } from 'ng2-dragula';
import { DragDropComponent } from './extra/drag-drop/drag-drop.component';

@NgModule({
imports: [DragulaModule],
declarations: [DragDropComponent]
})
export class UIComponentsModule { }
                

drag-drop.component.html would look like this

<div class='wrapper'>
    <div class='container' [dragula]='"first-bag"'>
      <div>You can move these elements between these two containers</div>
      <div>Moving them anywhere else isn't quite possible</div>
      <div>There's also the possibility of moving elements around in the same container, changing their position</div>
    </div>
    <div class='container' [dragula]='"first-bag"'>
      <div>This is the default use case. You only need to specify the containers you want to use</div>
      <div>More interactive use cases lie ahead</div>
      <div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
    </div>
  </div>