Merge pull request #51 from czeckd/multiple-dual-lists

Multiple dual lists

Author: czeckd

README.md

@@ -28,6 +28,8 @@ import { AngularDualListBoxModule } from 'angular-dual-listbox';
 })
 export class AppModule {}
 ```
+See also the [basic-dual-list-demo](https://github.com/czeckd/basic-dual-listbox-demo) for a sample project using this module.
+
 
 ## Usage
 Basic usage is:
@@ -56,7 +58,7 @@ The html template packaged with this component is based on Bootstap 3; however i
 
 ```typescript
 import { Component } from '@angular/core';
-import { DualListComponent } from 'angular-dual-listbox/index';
+import { DualListComponent } from 'angular-dual-listbox/dual-list.component';
 
 @Component({
     selector: 'custom-dual-list',
@@ -66,12 +68,10 @@ import { DualListComponent } from 'angular-dual-listbox/index';
 export class CustomDualListComponent extends DualListComponent {
 }
 ```
-See [`dual-list.component.html`](https://github.com/czeckd/angular-dual-listbox/blob/master/lib/dual-list.component.html) and [`dual-list.component.css`](https://github.com/czeckd/angular-dual-listbox/blob/master/lib/dual-list.component.css) for template and style guidance.
-
-## Known issue
-The drag-and-drop between multiple ``<dual-list>`` components may cause 
-undesired moves. For the time being, if the component is used, then it
-is recommended only have one ``<dual-list>`` visable to the user at a time.
+See [`dual-list.component.html`](https://github.com/czeckd/angular-dual-listbox/blob/master/lib/dual-list.component.html) and 
+[`dual-list.component.css`](https://github.com/czeckd/angular-dual-listbox/blob/master/lib/dual-list.component.css) for template and style guidance. 
+There is also an Angular-CLI seed project, [custom-dual-listbox](https://github.com/czeckd/custom-dual-listbox), available with an example of a 
+customized view and extended functionality.
 
 ## License
 MIT

demo/systemjs.config.js

@@ -1,6 +1,6 @@
 (function(global) {
 
-  var ngVer = '@4.0.0';
+  var ngVer = '@4.4.4';
 
   // map tells the System loader where to look for things
   var map = {

lib/dual-list.component.ts

@@ -5,6 +5,8 @@ import { BasicList } from './basic-list';
 
 export type compareFunction = (a:any, b:any) => number;
 
+var nextId = 0;
+
 @Component({
 	selector: 'dual-list',
 	styleUrls: [ 'lib/dual-list.component.css' ],
@@ -20,6 +22,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 
 	static DEFAULT_FORMAT = { add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: DualListComponent.LTR };
 
+	@Input() id = `dual-list-${nextId++}`;
 	@Input() key = '_id';
 	@Input() display = '_name';
 	@Input() height = '100px';
@@ -206,13 +209,17 @@ export class DualListComponent implements DoCheck, OnChanges {
 			this.selectItem(list.pick, item);
 		}
 		list.dragStart = true;
-		event.dataTransfer.setData('text', item['_id']);
+
+		// Set a custom type to be this dual-list's id.
+		event.dataTransfer.setData(this.id, item['_id']);
 	}
 
 	allowDrop(event:DragEvent, list:BasicList) {
-		event.preventDefault();
-		if (!list.dragStart) {
-			list.dragOver = true;
+		if (event.dataTransfer.types.length && (event.dataTransfer.types[0] === this.id)) {
+			event.preventDefault();
+			if (!list.dragStart) {
+				list.dragOver = true;
+			}
 		}
 		return false;
 	}
@@ -223,23 +230,17 @@ export class DualListComponent implements DoCheck, OnChanges {
 	}
 
 	drop(event:DragEvent, list:BasicList) {
-		event.preventDefault();
-		this.dragLeave();
-		this.dragEnd();
-
-		const id = event.dataTransfer.getData('text');
+		if (event.dataTransfer.types.length && (event.dataTransfer.types[0] === this.id)) {
+			event.preventDefault();
+			this.dragLeave();
+			this.dragEnd();
 
-		const mv = list.list.filter( (e:any) => e._id === id );
-		if (mv.length > 0) {
-			for (let i = 0, len = mv.length; i < len; i += 1) {
-				list.pick.push( mv[i] );
+			if (list === this.available) {
+				this.moveItem(this.available, this.confirmed);
+			} else {
+				this.moveItem(this.confirmed, this.available);
 			}
 		}
-		if (list === this.available) {
-			this.moveItem(this.available, this.confirmed);
-		} else {
-			this.moveItem(this.confirmed, this.available);
-		}
 	}
 
 	private trueUp() {

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-dual-listbox",
   "description": "Angular 4+ component for a dual listbox control.",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/czeckd/angular-dual-listbox.git"
@@ -32,26 +32,26 @@
     "@angular/forms": ">=4.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^4.3.6",
-    "@angular/compiler": "^4.3.6",
-    "@angular/compiler-cli": "^4.3.6",
-    "@angular/core": "^4.3.6",
-    "@angular/forms": "^4.3.6",
-    "@angular/platform-browser": "^4.3.6",
-    "@angular/platform-browser-dynamic": "^4.3.6",
+    "@angular/common": "^4.4.4",
+    "@angular/compiler": "^4.4.4",
+    "@angular/compiler-cli": "^4.4.4",
+    "@angular/core": "^4.4.4",
+    "@angular/forms": "^4.4.4",
+    "@angular/platform-browser": "^4.4.4",
+    "@angular/platform-browser-dynamic": "^4.4.4",
     "@types/core-js": "^0.9.43",
     "@types/node": "^6.0.88",
     "bootstrap": "^3.3.7",
     "concurrently": "^2.2.0",
     "core-js": "^2.5.1",
     "lite-server": "^2.2.2",
-    "rimraf": "^2.6.1",
+    "rimraf": "^2.6.2",
     "rollup": "^0.41.6",
     "rxjs": "^5.2.0",
     "systemjs": "0.19.47",
     "ts-node": "^3.0.2",
     "tslint": "~4.5.0",
     "typescript": "~2.2.0",
-    "zone.js": "^0.8.17"
+    "zone.js": "^0.8.18"
   }
 }