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.
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.
<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 { | |
.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; | |
} | |
} |
// 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 ); | |
} | |
} |