<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/ng-drag-drop@4.0.0/style.css">
<title>ng2-drag-drop Demo</title>
</head>
<body style="padding-top: 5rem;">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Angular Drag Drop (ng-drag-drop)</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<!--<a class="nav-link" href="#">Github <span class="sr-only">(current)</span></a>-->
</li>
<!--<li class="nav-item">
<a class="nav-link" href="#">NPM</a>
</li>-->
</ul>
</div>
</nav>
<div class="container">
<my-app>
<i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
<span class="sr-only">Loading...</span>
</my-app>
</div>
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(function (err) {
console.error(err);
});
</script>
</body>
</html>
/* Styles go here */
### Angular Drag Drop demo
See: https://www.npmjs.com/package/ng-drag-drop
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
'ng-drag-drop': 'npm:ng-drag-drop/index.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { CompleteDemoComponent } from 'src/complete-demo/complete-demo.component';
import { DeleteItemComponent } from 'src/delete-item/delete-item.component';
import {NgDragDropModule} from "ng-drag-drop";
@Component({
selector: 'my-app',
template: `
<h2>
Angular Drag & Drop Demo
<a href="https://www.npmjs.com/package/ng-drag-drop"><img src="https://img.shields.io/npm/dm/ng-drag-drop.svg" alt=""></a>
</h2>
<iframe src="https://ghbtns.com/github-btn.html?user=ObaidurRehman&repo=ng-drag-drop&type=star&count=true" frameborder="0"
scrolling="0" width="80px" height="25px"></iframe>
<complete-demo></complete-demo> <delete-item></delete-item>`,
styles: []
})
export class App {
}
@NgModule({
imports: [ BrowserModule, NgDragDropModule.forRoot(), FormsModule ],
declarations: [ App, CompleteDemoComponent, DeleteItemComponent ],
bootstrap: [ App ]
})
export class AppModule {
}
<h3>Complete Demo</h3>
<p>This is a complete demo that features drop scopes, custom styling, disable drag/drop & drag handles.</p>
<hr>
<div class="row">
<div class="col-sm-3">
<div class="card card-outline-success mb-3">
<div class="card-header card-inverse card-success">
Draggable Items
</div>
<div class="card-block scroll-list">
<div class="list-group">
<li class="list-group-item list-group-item-action list-group-item-success" [draggable] *ngFor="let item of vegetables"
[dragClass]="'active'" [dragData]="item" [dragScope]="item.type" [dragEnabled]="dragEnabled">
{{item.name}}
</li>
</div>
</div>
<div class="card-footer">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" title="Drag Enabled" [(ngModel)]="dragEnabled">
Drag Enabled
</label>
</div>
</div>
</div>
<div class="card card-outline-primary mb-3">
<div class="card-header card-inverse card-primary">Draggable Items with Handle</div>
<div class="card-block scroll-list">
<ul class="list-group text-center">
<li draggable *ngFor="let item of fruits" [dragClass]="'drag-over'" [dragData]="item" class="list-group-item justify-content-between list-group-item-action"
[dragScope]="item.type" [dragHandle]="'.drag-bar'">
{{item.name}}
<i #dragHandle class="drag-bar fa fa-bars fa-lg" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card card-outline-primary mb-3" droppable [dragOverClass]="'drag-target-border'" [dropScope]="'fruit'" [dragHintClass]="'drag-hint'"
(onDrop)="onFruitDrop($event)" [dropEnabled]="fruitDropEnabled">
<div class="card-header card-inverse card-primary">
Drop Fruits here
</div>
<div class="card-block scroll-list">
<li *ngFor="let item of droppedFruits" class="list-group-item">{{item.name}}</li>
</div>
<div class="card-footer">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" [(ngModel)]="fruitDropEnabled">
Drop Enabled
</label>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card card-outline-primary mb-3" droppable [dragOverClass]="'drag-target-border-green'" [dropScope]="'vegetable'"
[dragHintClass]="'drag-hint'" (onDrop)="onVegetableDrop($event)">
<div class="card-header card-inverse card-primary">Drop Vegetables here</div>
<div class="card-block scroll-list">
<li *ngFor="let item of droppedVegetables" class="list-group-item">{{item.name}}</li>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card card-outline-primary mb-3" droppable [dragOverClass]="'drag-target-border'" [dropScope]="['fruit', 'vegetable']"
[dragHintClass]="'drag-hint'" (onDrop)="onAnyDrop($event)">
<div class="card-header card-inverse card-primary">Drop Anything here</div>
<div class="card-block scroll-list">
<li *ngFor="let item of droppedItems" class="list-group-item">{{item.name}}</li>
</div>
</div>
</div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'complete-demo',
templateUrl: 'src/complete-demo/complete-demo.component.html',
styles: [`
div.scroll-list {
overflow: auto;
max-height: 70vh;
}
.drag-over {
border: #ff525b dashed 2px;
}
.drag-hint {
border: #ffc100 dashed 2px;
}
.drag-target-border {
border: #00bfff dashed 2px;
}
.drag-target-border-green {
border: #3c763d dashed 2px;
}
`
]
})
export class CompleteDemoComponent {
vegetables = [
{name: 'Carrot', type: 'vegetable'},
{name: 'Onion', type: 'vegetable'},
{name: 'Potato', type: 'vegetable'},
{name: 'Capsicum', type: 'vegetable'}];
fruits = [
{name: 'Apple', type: 'fruit'},
{name: 'Orange', type: 'fruit'},
{name: 'Mango', type: 'fruit'},
{name: 'Banana', type: 'fruit'}];
droppedFruits = [];
droppedVegetables = [];
droppedItems = [];
fruitDropEnabled = true;
dragEnabled = true;
onFruitDrop(e: any) {
this.droppedFruits.push(e.dragData);
this.removeItem(e.dragData, this.fruits);
}
onVegetableDrop(e: any) {
this.droppedVegetables.push(e.dragData);
this.removeItem(e.dragData, this.vegetables);
}
onAnyDrop(e: any) {
this.droppedItems.push(e.dragData);
if (e.dragData.type === 'vegetable') {
this.removeItem(e.dragData, this.vegetables);
} else {
this.removeItem(e.dragData, this.fruits);
}
}
removeItem(item: any, list: Array<any>) {
let index = list.map(function (e) {
return e.name
}).indexOf(item.name);
list.splice(index, 1);
}
}
<h3>Delete Demo</h3>
<p>Move Items to the bin.</p>
<hr>
<div class="row">
<div class="col-sm-3">
<div class="card card-outline-primary mb-3">
<div class="card-header card-inverse card-primary">Delete Items</div>
<div class="card-block scroll-list">
<ul class="list-group">
<li draggable *ngFor="let item of deleteItems" [dragClass]="'active'" [dragScope]="'delete'" [dragData]="item" class="list-group-item">
{{item.name}}
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card card-inverse card-primary mb-3 text-center" droppable [dragHintClass]="'drag-hint-scale'" [dragOverClass]="'bg-danger'"
[dropScope]="'delete'" (onDrop)="onDeleteDrop($event)">
<div class="card-block">
<blockquote class="card-blockquote">
<h4 class="card-title"><i class="fa fa-trash" aria-hidden="true"></i> Drop to Delete</h4>
<p class="card-text">Drop Items here to delete</p>
</blockquote>
</div>
</div>
</div>
</div>
import {Component} from '@angular/core';
@Component({
selector: 'delete-item',
templateUrl: 'src/delete-item/delete-item.component.html',
styles: [`
div.scroll-list {
overflow: auto;
max-height: 70vh;
}
.drag-hint-scale {
// border: #ffc100 dashed 2px;
transition: all .1s ease-in-out;
transform: scale(1.1);
}
`
]
})
export class DeleteItemComponent {
deleteItems = [
{name: 'Angular2'},
{name: 'AngularJS'},
{name: 'Vue'},
{name: 'ReactJS'},
{name: 'Backbone'}
];
onDeleteDrop(e: any) {
this.removeItem(e.dragData, this.deleteItems);
}
removeItem(item: any, list: Array<any>) {
let index = list.map(function (e) {
return e.name
}).indexOf(item.name);
list.splice(index, 1);
}
}