Drag & Drop for Angular 2/4 Without Using HTML5

ng-avatar-drag-drop is a Drag & Drop component for Angular 2 and later, with no HTML5 and no external dependencies.

drag and drop angular, angular drag and drop without material, angular 2/4 drag and drop example, angular material drag and drop save position, angularcdkdrag drop

How to make use of it:

Installation:

npm install ng-avatar-drag-drop --save

1. If you are using SystemJS as the module loader, you will need to update the configuration to load the ng-avatar-drag-drop module.

System.config({
    map: {
        'ng-avatar-drag-drop': 'node_modules/ng-avatar-drag-drop'
    },
    packages: {
        'ng-avatar-drag-drop':  { main: 'index.js',  defaultExtension: 'js' },
    }
});

2. You need to import the NgAvatarDragDropModule into the module of your app where you want to use it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DemoComponent } from "./components/demo-component";
import { NgAvatarDragDropModule } from 'ng-avatar-drag-drop';



@NgModule({
  imports: [
      BrowserModule, 
      NgAvatarDragDropModule.forRoot()
  ],
  declarations: [DemoComponent],
  bootstrap: [DemoComponent]
})
export class AppModule {}

API Doc

Draggable directive

Attributes

Name	Type	Default Value	Description
`dragData`	`any`	`null`	The data will be available to the droppable directive on its `onDrop()` event.
`dragScope`	`string	Array`	`'default'`
`dragClass`	`string`	`'ng-avatar-drag'`	CSS class is applied on the draggable that is applied when the item is being dragged.
`draggableClass`	`string`	`'ng-avatar-draggable'`	CSS class applied on the source draggable element.
`dragHandle`	`HTMLElement`	`null`	The selector that defines the drag Handle.
`dragEnabled`	`boolean`	`true`	Defines if drag is enabled. `true` by default.
`dragType`	`number`	`0`	Defines way of dragging. There are two ways of dragging – by `positioning` (0) and by `transform` (1) manipulations. `positioning` (0) by default.

Events

Name	Parameters	Description
`onDragStartEvent`	e: DOM event	Event fired when Drag is started
`onDragEvent`	e: DOM event	Event fired while the element is being dragged
`onDragEndEvent`	e: DOM event	Event fired when dragged ends

Droppable directive

Attributes

Name	Type	Default Value	Description
`dropScope`	`string	Array`	`'default'`
`dragOverClass`	`string`	`'drag-over-border'`	CSS class is applied on the droppable element when the item is being dragged over a valid drop target.
`dragHintClass`	`string`	`'drag-hint-border'`	CSS class is applied on this droppable when a compatible draggable item is being dragged. This can be used to visually show allowed drop zones.
`dropEnabled`	`boolean`	`true`	Defines if the drop is enabled. `true` by default.

Events

Name	Parameters	Description
`onDragEnter`	e: DOM event	Event fired when Drag dragged element enters a valid drop target.
`onDragOver`	e: DOM event	Event fired when an element is being dragged over a valid drop target.
`onDragLeave`	e: DOM event	Event fired when a dragged element leaves a valid drop target.
`onDrop`	e: `DropEvent`	Event fired when an element is dropped on a valid drop target.