diff --git a/README.md b/README.md index f50ab35..4e9a90d 100644 --- a/README.md +++ b/README.md @@ -83,31 +83,27 @@ import {Component} from '@angular/core'; @Component({ selector: 'app', template: ` -

Simple Drag-and-Drop

-
-
-
-
Available to drag
-
-
-
-
Drag Me
+
+

Simple Drag-and-Drop

+
+
+
+
Available to drag
+
+
+
+
Drag Me
+
-
-
-
-
Place to drop
-
-
-
-
-
-
-
Restricted to drop
-
+
+
+
Place to drop
+
+
Item was dropped here
+
@@ -126,46 +122,48 @@ import {Component} from '@angular/core'; @Component({ selector: 'app', template: ` -

Restricting Drag-and-Drop with zones

-
-
-
-
Available to drag
-
-
-
-
Drag Me
-
Zone 1 only
+
+

Restricted Drag-and-Drop with zones

+
+
+
+
Available to drag
+
+
+
+
Drag Me
+
Zone 1 only
+
-
-
-
Available to drag
-
-
-
-
Drag Me
-
Zone 1 & 2
+
+
Available to drag
+
+
+
+
Drag Me
+
Zone 1 & 2
+
-
-
-
-
Zone 1
-
+
+
+
Zone 1
+
+
Item was dropped here
+
-
-
-
-
Zone 2
-
+
+
+
Zone 2
+
+
Item was dropped here
+
@@ -184,32 +182,32 @@ import {Component} from '@angular/core'; @Component({ selector: 'app', template: ` -

Transfer custom data in Drag-and-Drop

-
-
-
-
Available to drag
-
-
-
-
Drag Me
-
{{transferData | json}}
+
+

Transfer custom data in Drag-and-Drop

+
+
+
+
Available to drag
+
+
+
+
Drag Me
+
{{transferData | json}}
+
-
-
-
-
Place to drop (Items:{{receivedData.length}})
-
-
{{data | json}}
+
+
+
Place to drop (Items:{{receivedData.length}})
+
+
{{data | json}}
+
+
` }) diff --git a/src/sortable.component.ts b/src/sortable.component.ts index b8189fc..6c20faa 100644 --- a/src/sortable.component.ts +++ b/src/sortable.component.ts @@ -21,7 +21,7 @@ export class SortableContainer extends AbstractComponent { @Input() set sortableData(sortableData: Array) { 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 { @@ -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; } diff --git a/tests/dnd.sortable.spec.ts b/tests/dnd.sortable.spec.ts index 53189d4..7727c7e 100644 --- a/tests/dnd.sortable.spec.ts +++ b/tests/dnd.sortable.spec.ts @@ -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 = ['sOne', 'sTwo', 'sThree']; - let multiOneList:Array = ['mOne']; - let multiTwoList:Array = ['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 = divElem.querySelector('#multiOne'); - let multiTwoUlElem:HTMLElement = divElem.querySelector('#multiTwo ul'); - - triggerEvent(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) {