Disableable drag-n-drop

Author: czeckd

README.md

@@ -42,7 +42,7 @@ The following parameters can be set on a dual-list:
 - **display** - The field of each object for displaying the object each the
 lists, default is ``_name``. (With a source of an array of strings, each string is its own display.)
 - **height** - The height of the lists, default is ``100px``.
-- **format** - A format object, default is ``{ add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'left-to-right' }``
+- **format** - A format object, default is ``{ add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'left-to-right', draggable: true }``
 - **filter** - A boolean whether or not to display a filter for the lists, default is ``false``.
 - **sort** - A boolean whether or not to keep the lists sorted, default is ``false``.
 - **compare** - A compare function to be used for sorting the lists. Note if

app/demo-app.component.ts

@@ -5,6 +5,7 @@ import { DualListComponent } from 'angular-dual-listbox';
 
 @Component({
 	selector: 'demo-app',
+	styles: [ '.form-group { margin-bottom: 16px; }', '.checkbox { margin-top: inherit }' ],
 	template: `
 <div class="container-fluid">
 	<p></p>
@@ -52,6 +53,12 @@ import { DualListComponent } from 'angular-dual-listbox';
 					<label>None button</label>
 					<input class="form-control col-sm-2" [(ngModel)]="format.none" name="noneBtn">
 				</div>
+				<div class="form-group">
+					<label>Enable drag-and-drop</label>
+					<div class="checkbox">
+						<label><input type="checkbox" [(ngModel)]="format.draggable" name="drag">draggable</label>
+					</div>
+				</div>
 			</form>
 		</div>
 

lib/dual-list.component.html

@@ -14,7 +14,7 @@
 				<li *ngFor="let item of available.sift; let idx=index;"
 					(click)="disabled ? null : selectItem(available.pick, item); shiftClick($event, idx, available, item)"
 					[ngClass]="{selected: isItemSelected(available.pick, item), disabled: disabled}"
-					[draggable]="!disabled" (dragstart)="drag($event, item, available)" (dragend)="dragEnd(available)"
+					[draggable]="!disabled && format.draggable" (dragstart)="drag($event, item, available)" (dragend)="dragEnd(available)"
 				><label>{{item._name}}</label></li>
 			</ul>
 		</div>
@@ -42,7 +42,7 @@
 				<li #itmConf *ngFor="let item of confirmed.sift; let idx=index;"
 					(click)="disabled ? null : selectItem(confirmed.pick, item); shiftClick($event, idx, confirmed, item)"
 					[ngClass]="{selected: isItemSelected(confirmed.pick, item), disabled: disabled}"
-					[draggable]="!disabled" (dragstart)="drag($event, item, confirmed)" (dragend)="dragEnd(confirmed)"
+					[draggable]="!disabled && format.draggable" (dragstart)="drag($event, item, confirmed)" (dragend)="dragEnd(confirmed)"
 				><label>{{item._name}}</label></li>
 			</ul>
 		</div>

lib/dual-list.component.ts

@@ -20,7 +20,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 	static LTR = 'left-to-right';
 	static RTL = 'right-to-left';
 
-	static DEFAULT_FORMAT = { add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: DualListComponent.LTR };
+	static DEFAULT_FORMAT = { add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: DualListComponent.LTR, draggable: true };
 
 	@Input() id = `dual-list-${nextId++}`;
 	@Input() key = '_id';
@@ -86,6 +86,10 @@ export class DualListComponent implements DoCheck, OnChanges {
 			if (typeof(this.format.none) === 'undefined') {
 				this.format.none = DualListComponent.DEFAULT_FORMAT.none;
 			}
+
+			if (typeof(this.format.draggable) === 'undefined') {
+				this.format.draggable = DualListComponent.DEFAULT_FORMAT.draggable;
+			}
 		}
 
 		if (changeRecord['source']) {