ng-avatar-drag-drop

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

Name	Type	Default Value	Description
dragData	any	null	The data that will be avaliable to the droppable directive on its onDrop() event.
dragScope	string | Array<string>	'default'	Defines compatible drag drop pairs. Values must match with droppable.dropScope.
dragClass	string	'ng-avatar-drag'	CSS class 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 a 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<string>	'default'	Defines compatible drag drop pairs. Values must match with draggable.dragScope
dragOverClass	string	'drag-over-border'	CSS class applied on the droppable element when the item is being dragged over valid drop target.
dragHintClass	string	'drag-hint-border'	CSS class 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 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.

License

MIT