This project was generated with Angular CLI version 10.0.5.
npm i ngconf-dragdrop --save
NPM Package Link
Import NgconfDragDropModule in app.module.ts file.
app.module.ts
import {NgconfDragDropModule} from 'ngconf-dragdrop';
imports: [
BrowserModule,
AppRoutingModule,
NgconfDragDropModule,
HttpClientModule
]
This step is to quick start the usage of package later with the understanding of workflow you can
modify the code. You can have a look in our stackbliz demo for more clarity.
app.component.css
.drag{
height: 100px;
width: 100px;
border: solid 3px;
}
.container{
border: dotted 3px;
min-height: 500px;
}
If you dont use drag boundary then element can be moved anywhere in the document.
app.component.html
<div class="container mt-5 " ngDragBoundary>
<div class="drag" ngDrag>
<h5 class="text-muted text-center mt-3">I am Draggable :)</h5>
</div>
</div>
That's it you are good to go. Happy Coding :)