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.

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…


Simple jQuery Plugin for Embedding YouTube Videos As Cover Background

jquery.youtube-background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…