ionic2 rc0 dragula bag limit 1

set a bag limit of 1 for ionic2 rc0 dragula.md

Set up dragula as per the other gist.

When something is dropped, we clear the target's children and then re-append the dropped element.

Should do this more Angular-ey, but ok for now.

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">

  <button ion-button color="primary" (click)="add()">Add</button>

  <div class="deck">

    <div
      class='card'
      [dragula]='"bag"'
      > DropZone </div>

    <div
      class="card"
      *ngFor='let item of items'
      [@SlideIn]="in"
      [dragula]='"bag"'
      >
      {{item}}
    </div>

  </div>



  <div class="deck" [dragula]='"bag"'>

    <p>drag from these to any of the cards above</p>

    <div
      class="card"
      *ngFor='let item of source'
      >
      {{item}}
    </div>

  </div>

</ion-content>

home.scss

.home {

  .deck {
    // display: flex;
    background: #FAFFB2;
    white-space: nowrap;
    height: 200px;
  }
  .deck:after {
    content: "";
    display: table;
    clear: both;
  }

  .card {
    display: block;
    float: left;
    background: #96FFE2;
    height: 100px;
    width: 100px;
    outline: 1px solid white;
  }

  .card .card {
    background: yellow;
  }
}

home.ts

// pages home
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/core';

import { DragulaService } from '../../modules/ng2-dragula-master/components/dragula.provider';


@Component({
  templateUrl: 'home.html',
  animations: [

    trigger('fadeInOut', [
      state('in', style({opacity: '1'})),
      transition('void => *', [
        style({opacity: '0'}),
        animate(1000)
      ]),
      transition('* => void', [
        animate(1000, style({opacity: '0'}))
      ])
    ]),

    trigger('SlideIn', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        animate(500, keyframes([
          style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
          style({opacity: 0.2, transform: 'translateX(15px)',  offset: 0.3}),
          style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
        ]))
      ])
    ])
  ]

})
export class Home {

  items: any = ['a','b','c','d', 'e', 'f', 'g', 'h'];
  source: any = ['zz','yy','xx'];
  counter: number = 0;
  dropzones: any = [0];

  constructor( public dragulaService: DragulaService ) {
    dragulaService.drop.subscribe((value) => {

      let dropped = value[1];
      let target = value[2];
      this.oneChildPolicy(dropped, target);

    });
  }

  oneChildPolicy(dropped, target) {
    // This is using DOM manipulation, 
    // but that's what dragula is doing anyway so no biggie
    
    // Clear out existing content
    while(target.firstChild) {
      target.removeChild(target.firstChild);
    }
    // Replace the dropped element
    target.appendChild(dropped);
  }

  add() {
   this.items.unshift(++this.counter);
   console.log( 'counter', this.counter );
  }
}