How to use ng2-dnd for Angular2.1.0 in Ionic2RC0
demo at https://embed.plnkr.co/fnvUmP8fgGk2y37OBfWP/
need to use a shim for ios drag n drop https://github.com/timruffles/ios-html5-drag-drop-shim
How to use ng2-dnd for Angular2.1.0 in Ionic2RC0
demo at https://embed.plnkr.co/fnvUmP8fgGk2y37OBfWP/
need to use a shim for ios drag n drop https://github.com/timruffles/ios-html5-drag-drop-shim
import { NgModule } from '@angular/core'; | |
import { IonicApp, IonicModule } from 'ionic-angular'; | |
// The App ! | |
import { MyApp } from './app.component'; | |
// NPM modules | |
import { DndModule } from 'ng2-dnd'; | |
// Pages | |
import { Home } from '../pages/home/home'; | |
import { Tabs } from '../pages/tabs/tabs'; | |
@NgModule({ | |
declarations: [ | |
MyApp, | |
Home, | |
Tabs, | |
], | |
imports: [ | |
IonicModule.forRoot(MyApp), | |
DndModule.forRoot() | |
], | |
exports: [DndModule], | |
bootstrap: [IonicApp], | |
// Add components here that aren't referenced in templates | |
// E.g. people-card doesn't get included here | |
// because people-card selector is used in template html | |
// Pages that we link to using nav.push go here | |
// because the nav is done in component not html.. etc | |
entryComponents: [ | |
MyApp, | |
Home, | |
Tabs | |
], | |
providers: [ | |
] | |
}) | |
export class AppModule {} |
<ion-header> | |
<ion-navbar> | |
<ion-title>Home</ion-title> | |
</ion-navbar> | |
</ion-header> | |
<ion-content padding class="home-page"> | |
<div class="row"> | |
<div | |
class="person" | |
*ngFor='let item of items' | |
dnd-draggable | |
[dragEnabled]="true" | |
[dragData]="item" | |
> | |
<p>{{item}}</p> | |
</div> | |
</div> | |
<div class="row"> | |
<div | |
dnd-droppable | |
(onDropSuccess)="droppedPerson($event)" | |
> | |
<div class="person"> | |
{{droppedValue}} | |
</div> | |
</div> | |
</div> | |
</ion-content> |
// pages home | |
import { Component } from '@angular/core'; | |
@Component({ | |
templateUrl: 'home.html', | |
}) | |
export class Home { | |
items: number[]; | |
droppedValue: number; | |
constructor() { | |
this.items = [1,2,3,4]; | |
} | |
droppedPerson(event) { | |
console.log(event); | |
this.droppedValue = event.dragData; | |
} | |
} |
<!DOCTYPE html> | |
<html lang="en" dir="ltr"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Ionic App</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
<meta name="format-detection" content="telephone=no"> | |
<meta name="msapplication-tap-highlight" content="no"> | |
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> | |
<link rel="manifest" href="assets/manifest.json"> | |
<meta name="theme-color" content="#4e8ef7"> | |
<!-- un-comment this code to enable service worker | |
<script> | |
if ('serviceWorker' in navigator) { | |
navigator.serviceWorker.register('service-worker.js') | |
.then(() => console.log('service worker installed')) | |
.catch(err => console.log('Error', err)); | |
} | |
</script>--> | |
<link href="build/main.css" rel="stylesheet"> | |
</head> | |
<body> | |
<!-- Ionic's root component and where the app will load --> | |
<ion-app></ion-app> | |
<!-- drag n dro pshim for ios --> | |
<script src="assets/js/ios-drag-drop.js"></script> | |
<!-- cordova.js required for cordova apps --> | |
<script src="cordova.js"></script> | |
<!-- The polyfills js is generated during the build process --> | |
<script src="build/polyfills.js"></script> | |
<!-- The bundle js is generated during the build process --> | |
<script src="build/main.js"></script> | |
</body> | |
</html> |
Not work for me in prod mode, only in serve:
[16:22:15] Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider
replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in
/Users/Dmitry/Workstation/DND/.tmp/app/app.module.ts, resolving symbol AppModule in
/Users/Dmitry/Workstation/DND/.tmp/app/app.module.ts
[16:22:15] ngc failed
[16:22:15] ionic-app-script task: "build"
[16:22:15] Error: Error