import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
people = [
{
"_id": "5893ab006a7539cabe0b8c8b",
"data": {
"name": "Logan Floyd",
"age": 32,
"gender": "male",
"email": "loganfloyd@interloo.com",
"phone": "(823) 545-2298",
"address": "527 Stuart Street, Richford, South Carolina, 3377"
}
},
{
"_id": "5893ab0054d8383fe9454fda",
"data": {
"name": "Leanne England",
"age": 32,
"gender": "female",
"email": "leanneengland@interloo.com",
"phone": "(991) 500-2707",
"address": "489 Bouck Court, Spelter, Oklahoma, 2573"
}
},
{
"_id": "5893ab007f885dbc31127852",
"data": {
"name": "Russo Wilkins",
"age": 26,
"gender": "male",
"email": "russowilkins@interloo.com",
"phone": "(978) 515-3972",
"address": "537 Joralemon Street, Goochland, Washington, 4596"
}
},
{
"_id": "5893ab00cfb64a1770febeee",
"data": {
"name": "Flynn Buckner",
"age": 21,
"gender": "male",
"email": "flynnbuckner@interloo.com",
"phone": "(967) 444-2252",
"address": "969 Wallabout Street, Adamstown, Alaska, 5986"
}
},
{
"_id": "5893ab0068bfc541886181a2",
"data": {
"name": "Leticia Morin",
"age": 25,
"gender": "female",
"email": "leticiamorin@interloo.com",
"phone": "(807) 431-2683",
"address": "678 Norwood Avenue, Elizaville, Michigan, 756"
}
},
{
"_id": "5893ab006926d1d35b25ab14",
"data": {
"name": "Michael Moran",
"age": 34,
"gender": "female",
"email": "michaelmoran@interloo.com",
"phone": "(908) 507-3615",
"address": "382 Clay Street, Nash, Louisiana, 3947"
}
},
{
"_id": "5893ab0019a77e984f9c8e98",
"data": {
"name": "Erika Lowery",
"age": 33,
"gender": "female",
"email": "erikalowery@interloo.com",
"phone": "(902) 528-3726",
"address": "644 Belmont Avenue, Neibert, American Samoa, 376"
}
},
{
"_id": "5893ab00f0f0a8a70ad3cb14",
"data": {
"name": "Goff Lowe",
"age": 30,
"gender": "male",
"email": "gofflowe@interloo.com",
"phone": "(814) 518-2081",
"address": "530 Herkimer Place, Lewis, Federated States Of Micronesia, 1353"
}
},
{
"_id": "5893ab005a5d0c44aa36309e",
"data": {
"name": "Gutierrez Cochran",
"age": 32,
"gender": "male",
"email": "gutierrezcochran@interloo.com",
"phone": "(958) 466-2651",
"address": "790 Gotham Avenue, Beechmont, Pennsylvania, 5232"
}
},
{
"_id": "5893ab01a6122e447f755479",
"data": {
"name": "Jennings Mccullough",
"age": 36,
"gender": "male",
"email": "jenningsmccullough@interloo.com",
"phone": "(811) 595-3736",
"address": "910 Hewes Street, Deercroft, Rhode Island, 1429"
}
}
];
cities = [
{
"_id": "5893b22a93d7b6f35fa60f90",
"city": "Hollymead"
},
{
"_id": "5893b22a5f7c6de92b544b6b",
"city": "Berwind"
},
{
"_id": "5893b22a813b7eb86c1ebe58",
"city": "Longbranch"
},
{
"_id": "5893b22a72bb8984a0086a07",
"city": "Brutus"
},
{
"_id": "5893b22a0adfba100c09ae26",
"city": "Bluetown"
}
];
droppedItems = [];
addDroppedItem(item:any) {
this.droppedItems.push(item);
}
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<!DOCTYPE html>
<html>
<head>
<title>Angular Quickstart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {color:#369;font-family: Arial,Helvetica,sans-serif;}
</style>
<!-- Polyfills -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script> window.autoBootstrap = true; </script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@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/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.3/lib/typescript.js',
'asb-dnd': "npm:asb-dnd@1.2.1",
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'asb-dnd': {
main: "index.ts",
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
if (global.autoBootstrap) { bootstrap(); }
// Bootstrap with a default `AppModule`
// ignore an `app/app.module.ts` and `app/main.ts`, even if present
// This function exists primarily (exclusively?) for the QuickStart
function bootstrap() {
console.log('Auto-bootstrapping');
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
getAppModule()
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function(err){ console.error(err); });
}
// Make the default AppModule
// returns a promise for the AppModule
function getAppModule() {
console.log('Making a bare-bones, default AppModule');
return Promise.all([
System.import('@angular/core'),
System.import('@angular/platform-browser'),
System.import('app/app.component'),
System.import('asb-dnd!typescript')
])
.then(function (imports) {
var core = imports[0];
var browser = imports[1];
var appComp = imports[2].AppComponent;
var AsbDragAndDropModule = imports[3].AsbDragAndDropModule;
var AppModule = function() {}
AppModule.annotations = [
new core.NgModule({
imports: [ browser.BrowserModule, AsbDragAndDropModule ],
declarations: [ appComp ],
bootstrap: [ appComp ]
})
]
return {AppModule: AppModule};
})
}
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
div.dragover::before {
border: 5px dotted blue;
background-color: green;
opacity: 0.2;
display: -webkit-box;
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 5px;
border-radius: 25px;
}
div.dragover.forbidden::before {
border: 5px dotted blue;
background-color: red;
}
div[asbDroppable] {
position:relative;
border: 1px solid black;
min-height: 200px;
width: 100%;
}
<h1>
Asb DnD demo
</h1>
<h3>Drag people to the box</h3>
<ul>
<li *ngFor="let person of people" [asbDraggable]="true" [asbDraggableData]="person.data" asbDraggableType="person">{{ person._id }}</li>
</ul>
<h3>Drag cities to the box</h3>
<ul>
<li *ngFor="let city of cities" [asbDraggable]="true" [asbDraggableData]="city" asbDraggableType="city">{{ city.city }}</li>
</ul>
<div asbDroppable="person" (onDrop)="addDroppedItem($event)">
<h2>Drop people here</h2>
<div *ngFor="let item of droppedItems">
<code>{{ item | json }}</code>
</div>
</div>