Press "Enter" to skip to content

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:


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.

    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';

  imports: [
  declarations: [DemoComponent],
  bootstrap: [DemoComponent]
export class AppModule {}


Draggable directive


NameTypeDefault ValueDescription
dragDataanynullThe data will be available to the droppable directive on its onDrop() event.
dragClassstring'ng-avatar-drag'CSS class is applied on the draggable that is applied when the item is being dragged.
draggableClassstring'ng-avatar-draggable'CSS class applied on the source draggable element.
dragHandleHTMLElementnullThe selector that defines the drag Handle.
dragEnabledbooleantrueDefines if drag is enabled. true by default.
dragTypenumber0Defines way of dragging. There are two ways of dragging – by positioning (0) and by transform (1) manipulations. positioning (0) by default.


onDragStartEvente: DOM eventEvent fired when Drag is started
onDragEvente: DOM eventEvent fired while the element is being dragged
onDragEndEvente: DOM eventEvent fired when dragged ends

Droppable directive


NameTypeDefault ValueDescription
dragOverClassstring'drag-over-border'CSS class is applied on the droppable element when the item is being dragged over a valid drop target.
dragHintClassstring'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.
dropEnabledbooleantrueDefines if the drop is enabled. true by default.


onDragEntere: DOM eventEvent fired when Drag dragged element enters a valid drop target.
onDragOvere: DOM eventEvent fired when an element is being dragged over a valid drop target.
onDragLeavee: DOM eventEvent fired when a dragged element leaves a valid drop target.
onDrope: DropEventEvent fired when an element is dropped on a valid drop target.

drag and drop for angular, ng-avatar-drag-drop Plugin/Github, angular material drag and drop multiple items

See Demo And Download

Official Website(havryliv): Click Here

This superior jQuery/javascript plugin is developed by havryliv. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.