Wondering what’s next for npm?Check out our public roadmap! »

    ng-avatar-drag-drop
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Angular Avatar Drag & Drop

    npm Codacy Badge

    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

    Install

    npm i ng-avatar-drag-drop

    DownloadsWeekly Downloads

    8

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar