ngconf-dragdrop

Ngconf-DragDrop Library

This project was generated with Angular CLI version 10.0.5.

Drag Drop feature for Angular.

Demo Link

Stackblitz Demo

Step - 1

npm i ngconf-dragdrop --save
NPM Package Link

Step - 2

Import NgconfDragDropModule in app.module.ts file.

app.module.ts

import {NgconfDragDropModule} from 'ngconf-dragdrop';
 imports: [
    BrowserModule,
    AppRoutingModule,
    NgconfDragDropModule,
    HttpClientModule
  ]

Step - 3

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 :)