drag-me

Custom Drag and drop using angular

Usage no npm install needed!

<script type="module">
  import dragMe from 'https://cdn.skypack.dev/drag-me';
</script>

README

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

grab-landing-page

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 |

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
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Vivaldi
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
Edison Augusthy
💻