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
Last active
November 11, 2016 13:40
-
-
Save benfoley/1ac7fc9447e67209555a1260721a1841 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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