Skip to content

Commit

Permalink
fix(): Fixed issue with empty container
Browse files Browse the repository at this point in the history
  • Loading branch information
@akserg
akserg committed Jan 29, 2017
1 parent 4c65a1a commit d55dab1
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 101 deletions.
138 changes: 68 additions & 70 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,31 +83,27 @@ import {Component} from '@angular/core';
@Component({
selector: 'app',
template: `
<h4>Simple Drag-and-Drop</h4>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-success">
<div class="panel-heading">Available to drag</div>
<div class="panel-body">
<div class="panel panel-default" dnd-draggable [dragEnabled]="true">
<div class="panel-body">
<div>Drag Me</div>
<div class="container">
<h4>Simple Drag-and-Drop</h4>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-success">
<div class="panel-heading">Available to drag</div>
<div class="panel-body">
<div class="panel panel-default" dnd-draggable [dragEnabled]="true">
<div class="panel-body">
<div>Drag Me</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div dnd-droppable class="panel panel-info">
<div class="panel-heading">Place to drop</div>
<div class="panel-body">
</div>
</div>
</div>
<div class="col-sm-3">
<div dnd-droppable class="panel panel-warning">
<div class="panel-heading">Restricted to drop</div>
<div class="panel-body">
<div class="col-sm-3">
<div dnd-droppable class="panel panel-info" (onDropSuccess)="simpleDrop=$event">
<div class="panel-heading">Place to drop</div>
<div class="panel-body">
<div *ngIf="simpleDrop">Item was dropped here</div>
</div>
</div>
</div>
</div>
Expand All @@ -126,46 +122,48 @@ import {Component} from '@angular/core';
@Component({
selector: 'app',
template: `
<h4>Restricting Drag-and-Drop with zones</h4>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-primary">
<div class="panel-heading">Available to drag</div>
<div class="panel-body">
<div class="panel panel-default" dnd-draggable [dragEnabled]="true"
[dropZones]="['zone1']">
<div class="panel-body">
<div>Drag Me</div>
<div>Zone 1 only</div>
<div class="container">
<h4>Restricted Drag-and-Drop with zones</h4>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-primary">
<div class="panel-heading">Available to drag</div>
<div class="panel-body">
<div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dropZones]="['zone1']">
<div class="panel-body">
<div>Drag Me</div>
<div>Zone 1 only</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Available to drag</div>
<div class="panel-body">
<div class="panel panel-default" dnd-draggable [dragEnabled]="true"
[dropZones]="['zone1', 'zone2']">
<div class="panel-body">
<div>Drag Me</div>
<div>Zone 1 & 2</div>
<div class="panel panel-success">
<div class="panel-heading">Available to drag</div>
<div class="panel-body">
<div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dropZones]="['zone1', 'zone2']">
<div class="panel-body">
<div>Drag Me</div>
<div>Zone 1 & 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div dnd-droppable class="panel panel-info" [dropZones]="['zone1']">
<div class="panel-heading">Zone 1</div>
<div class="panel-body">
<div class="col-sm-3">
<div dnd-droppable class="panel panel-info" [dropZones]="['zone1']" (onDropSuccess)="restrictedDrop1=$event">
<div class="panel-heading">Zone 1</div>
<div class="panel-body">
<div *ngIf="restrictedDrop1">Item was dropped here</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div dnd-droppable class="panel panel-warning" [dropZones]="['zone2']">
<div class="panel-heading">Zone 2</div>
<div class="panel-body">
<div class="col-sm-3">
<div dnd-droppable class="panel panel-warning" [dropZones]="['zone2']" (onDropSuccess)="restrictedDrop2=$event">
<div class="panel-heading">Zone 2</div>
<div class="panel-body">
<div *ngIf="restrictedDrop2">Item was dropped here</div>
</div>
</div>
</div>
</div>
Expand All @@ -184,32 +182,32 @@ import {Component} from '@angular/core';
@Component({
selector: 'app',
template: `
<h4>Transfer custom data in Drag-and-Drop</h4>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-success">
<div class="panel-heading">Available to drag</div>
<div class="panel-body">
<div class="panel panel-default" dnd-draggable [dragEnabled]="true"
[dragData]="transferData">
<div class="panel-body">
<div>Drag Me</div>
<div>{{transferData | json}}</div>
<div class="container">
<h4>Transfer custom data in Drag-and-Drop</h4>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-success">
<div class="panel-heading">Available to drag</div>
<div class="panel-body">
<div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragData]="transferData">
<div class="panel-body">
<div>Drag Me</div>
<div>{{transferData | json}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div dnd-droppable class="panel panel-info"
(onDropSuccess)="transferDataSuccess($event)">
<div class="panel-heading">Place to drop (Items:{{receivedData.length}})</div>
<div class="panel-body">
<div [hidden]="!receivedData.length > 0"
*ngFor="let data of receivedData">{{data | json}}</div>
<div class="col-sm-3">
<div dnd-droppable class="panel panel-info" (onDropSuccess)="transferDataSuccess($event)">
<div class="panel-heading">Place to drop (Items:{{receivedData.length}})</div>
<div class="panel-body">
<div [hidden]="!receivedData.length > 0" *ngFor="let data of receivedData">{{data | json}}</div>
</div>
</div>
</div>
</div>
</div>
`
})
Expand Down
5 changes: 1 addition & 4 deletions src/sortable.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export class SortableContainer extends AbstractComponent {
@Input() set sortableData(sortableData: Array<any>) {
this._sortableData = sortableData;
//
this.dropEnabled = this._sortableData.length === 0;
this.dropEnabled = !!this._sortableData;
// console.log("collection is changed, drop enabled: " + this.dropEnabled);
}
get sortableData(): Array<any> {
Expand Down Expand Up @@ -53,9 +53,6 @@ export class SortableContainer extends AbstractComponent {
}
// Add item to new list
this._sortableData.unshift(item);
if (this.dropEnabled) {
this.dropEnabled = false;
}
this._sortableDataService.sortableContainer = this;
this._sortableDataService.index = 0;
}
Expand Down
27 changes: 0 additions & 27 deletions tests/dnd.sortable.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,33 +260,6 @@ describe('Multi List Sortable Drag and Drop', () => {
expect(multiOneList[0]).toBe('mFour');
});

it('When the list is NOT empty the parent must NOT handle dragenter events', () => {
let singleList:Array<string> = ['sOne', 'sTwo', 'sThree'];
let multiOneList:Array<string> = ['mOne'];
let multiTwoList:Array<string> = ['mTwo', 'mThree', 'mFour', 'mFive', 'mSix'];

container.singleList = singleList;
container.multiOneList = multiOneList;
container.multiTwoList = multiTwoList;
componentFixture.detectChanges();

let divElem:HTMLElement = componentFixture.elementRef.nativeElement.querySelector('div');
expect(divElem).toBeDefined();
expect(divElem.children.length).toBe(3);

let multiOneElem:HTMLElement = <HTMLElement>divElem.querySelector('#multiOne');
let multiTwoUlElem:HTMLElement = <HTMLElement>divElem.querySelector('#multiTwo ul');

triggerEvent(<HTMLElement>multiTwoUlElem.children[0], 'dragstart', 'MouseEvent');
triggerEvent(multiOneElem, 'dragenter', 'MouseEvent');
componentFixture.detectChanges();

expect(multiOneList.length).toBe(1);
expect(multiTwoList.length).toBe(5);

expect(multiOneList[0]).toBe('mOne');
expect(multiTwoList[0]).toBe('mTwo');
});
});

function swap(nodes:HTMLCollection, firstNodeId:number, secondNodeId:number) {
Expand Down

0 comments on commit d55dab1

Please sign in to comment.