ng-avatar-drag-drop v1.0.0

Angular Avatar Drag & Drop

Drag & Drop for Angular 2 and beyond - without using HTML5 and with no external dependencies. Please refer to the demo section.

Content

1. Demo
2. Installation
3. Usage
4. Limitations
5. Development
6. API Doc

Demo

Check out the Plunker demo.

The demo folder of the repository contains the same demo as Plunkr that uses SystemJS. To run that demo do an npm install in that folder followed by npm start to serve the demo app.

Installation

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

Usage

Update SystemJS config

If you use SystemJS as your module loader then you will need to update the config 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' },
    }
});

Import NgAvatarDragDropModule

You need to import the NgAvatarDragDropModule in 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 {}

Use the ngAvatarDraggable & ngAvatarDroppable directives

Place the ngAvatarDraggable directive on an element that you want to be draggable. The following example makes the List item draggable:

<ul>
  <li ngAvatarDraggable>Coffee</li>
  <li ngAvatarDraggable>Tea</li>
  <li ngAvatarDraggable>Milk</li>
</ul>               

Similarly use the ngAvatarDroppable directive on an element where you want to drop draggable:

<div ngAvatarDroppable>
  <p>Drop items here</p>
</div>               

Setting a positioning type

You can use dragType property on ngAvatarDraggable to set a positioning type. The Type property can by only a number. There are a two types of dragging - positioning (0) and transform (1).

In the following example, each ngAvatarDraggable element has hiw own type of dragging. Coffee has a positioning type of dragging and Tea has a transform type of dragging.

<ul>
  <li ngAvatarDraggable [dragType]="0">Coffee</li>
  <li ngAvatarDraggable [dragType]="1">Tea</li>
  ...
</ul>               

Restrict Drop based on Scopes

You can use the dragScope & dropScope property on ngAvatarDraggable and ngAvatarDroppable respectively to restrict user from dropping a ngAvatarDraggable element into a ngAvatarDroppable. The Scope properties can be string, an Array of string (to indicate multiple scope) or a function. The scopes must match in both to indicate compatible drag-drop zones.

In the following example, only the ngAvatarDraggable with the drink dropScope can be dropped on the first ngAvatarDroppable and both drink and meal can be dropped in the second one.

<ul>
  <li ngAvatarDraggable [dragScope]="'drink'">Coffee</li>
  <li ngAvatarDraggable [dragScope]="'drink'">Tea</li>
  <li ngAvatarDraggable [dragScope]="'meal'">Biryani</li>
  <li ngAvatarDraggable [dragScope]="'meal'">Kebab</li>
  ...
</ul>               

<div ngAvatarDroppable [dropScope]="'drink'" [dragOverClass]="'drag-target-border'">
  <p>Only Drinks can be dropped in the above container</p>
</div>               

<div ngAvatarDroppable [dropScope]="['drink', 'meal']" [dragOverClass]="'drag-target-border'">
  <p>Both Meal and Drinks can be dropped in the above container</p>
</div>               

Drop Scope as Functions

The DropScope of the ngAvatarDroppable can be a function whose return value will determine if drop is allowed. This can be useful to implement complex logic that is otherwise not possible with string or array of string.

<div ngAvatarDroppable [dropScope]="dropAllowed" [dragOverClass]="'drag-target-border'">
  <p>Only those items are droppable for which the `isDropAllowed()` function returns true</p>
</div>

Here is how the function is defined in the component:

export class MyComponent {
  val = 500;
  isDropAllowed = (dragData: any) => {
    return dragData > this.val;
  }
}

Notice how the function is defined as an Arrow Function. You need to do this so the lexical scope of this is preserved. You also get the dragData in the parameter so you can compare it with whatever you want.

If DropScope is a function, it can also return an Observable, which needs to later resolve to true or false. This can help in cases when you need to check asynchronously (eg: via http) whether the drop is allowed.

export class MyComponent {
  val = 500;
  isDropAllowed = (dragData: any) => {
    // Resolves to true or false after 1 second
    return Observable.of(dragData > this.val).delay(1000);
  }
}

Transfer Data via Drag Drop

You can transfer data from the ngAvatarDraggable to the ngAvatarDroppable via the dragData property on the ngAvatarDraggable directive. The data will be received in the (onDrop) event of the ngAvatarDroppable:

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    template: `
<h3>Transfer Data via Drag Drop</h3>
<div class="row">
    <div class="col-sm-3">
        <ul class="list-group">
            <li ngAvatarDraggable *ngFor="let item of items" [dragData]="item" class="list-group-item">{{item.name}}</li>
        </ul>
    </div>
    
    <div class="col-sm-3">
    <div class="panel panel-default" ngAvatarDroppable (onDrop)="onItemDrop($event)">
        <div class="panel-heading">Drop Items here</div>
            <div class="panel-body">
                <li *ngFor="let item of droppedItems" class="list-group-item">{{item.name}}</li>
            </div>
        </div>
    </div>
</div>
`
})
export class AppComponent {
    items = [
            {name: "Apple", type: "fruit"},
            {name: "Carrot", type: "vegetable"},
            {name: "Orange", type: "fruit"}];
            
    onItemDrop(e: any) {
        // Get the dropped data here
        this.droppedItems.push(e.dragData);
    }
    constructor() { }
}             

Drag Handle

Drag Handle can be defined for a ngAvatarDraggable item which will restrict drag of the element unless the item is dragged from the specified element. The handle should be a valid selector variable (#dragHandle). Example:

<li ngAvatarDraggable>
   Not Draggable by list item but by the handle only.    
   <div class="pull-right">
       <i #dragHandle class="drag-handle fa fa-bars fa-lg" aria-hidden="true"></i>
   </div> 
</li>               

Limitations

This library does not uses Native Html5 drag & drop API to accomplish what it does. It uses simple positioning manipulations via position (top, left) or transform (x, y).

API Doc

Draggable directive

Attributes

Events

Droppable directive

Attributes

Events

License

MIT