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.
Last active
October 10, 2016 04:13
-
-
Save benfoley/51f23ae91e1b08a64fe5daf0ae67a5ee to your computer and use it in GitHub Desktop.
ionic2 rc0 dragula bag limit 1
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"> | |
| <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> |
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
| .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; | |
| } | |
| } |
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'; | |
| 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 ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment