drag-me

drag-me

A a custom drag and drop module for angular.

Features

• darg and drop any where in the dom
• custom callbacks for drag-start, drag-end, drop events
• Pass data in Dragging element
• custom styling

Angular compatibility

Angular Version	package version
angular 8 and below	1.1.5 and below
angular 9 and above(ivy version)	1.1.6 and above
angular 10+	1.1.7

Usage steps

• Run npm i drag-me --save in command prompt from root of your project folder

• Add import to App Module like this import { DragMeModule } from 'drag-me';

• Add to imports array in app module

  imports: [
      BrowserModule,
      StorageModule
      ],
  

• Add dragMe Directive to the element to drag

  <div dragMe [dragdata]="item" (ondrop)="onDrop($event)"></div>
  

  NB:[dragdata] is the data to carry,(ondrop) is callback on drop

• Add dropHere Directive to the Container to Drop

  <div dropHere (dropped)="onDrop($event)"></div>
  

  NB:(dropped) is callback on drop

Adding style

1. On Dragging drag-src class is added to the dragging element and we can customize our own style
2. over class is added to the target element when drag over the item

All Available methods

• dragStart()
• dropped()
• ondrop()

Browsers support

IE / Edge	Firefox	Chrome	Vivaldi
IE11, Edge	last 8 versions	last 8 versions	last 5 versions

Built with 🔧

• Angular

Developing 👷

1. Clone this repo with git.
2. Install dependencies by running npm install within the directory that you cloned (probably ng-ng7-DragAndDrop).
3. Start the development server with ng serve --o.
4. Open development site by going to http://localhost:4200 in your browser.

Author 🔮

Edison Augusthy 💻