benfoley/ ng2-dtd setup.md

## ng2-dtd setup.md

      
    Raw
  

               ng2-dtd setup.md
            
          
    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

  
## app.module.ts
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 {}

## home.html
<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>

## home.ts
// 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;
  }

}

## index.html
<!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>
	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>