ng2-dragula is one of the best Drag and drop library for Angular 2x and succeeding versions. its Official Angular2 wrapper for dragula( AngularJs (1.x)). This library expose lot of drag and drop call backs and events while drag and drop operations. if your using dragula than tag dragula.
Official GitHub ng2-dragula
Install
You can get it on npm.
npm install ng2-dragula --save
Setup
You'll need to add DragulaModule to your application module.
AppModule
@NgModule({
declarations: [
AppComponent
],
imports: [
DragulaModule,
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
@Component({
selector: 'sample',
template:`
<div>
<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>
</div>
`
})
class Sample {}
Try out the demo!
More information about event