ng2-dnd - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

bundles/ng2-dnd.js

@@ -32,2 +32,3 @@ System.registerDynamic("src/dnd.draggable", ["angular2/core", "./dnd.component", "./dnd.config", "./dnd.service"], true, function($__require, exports, module) {
   var core_1 = $__require('angular2/core');
+  var core_2 = $__require('angular2/core');
   var dnd_component_1 = $__require('./dnd.component');
@@ -38,5 +39,5 @@ var dnd_config_1 = $__require('./dnd.config');
     __extends(DraggableComponent, _super);
-    function DraggableComponent(elemRef, _dragDropService, _config) {
-      _super.call(this, elemRef, _dragDropService, _config);
-      this.onDragSuccessCallback = new core_1.EventEmitter();
+    function DraggableComponent(elemRef, dragDropService, config, cdr) {
+      _super.call(this, elemRef, dragDropService, config, cdr);
+      this.onDragSuccessCallback = new core_2.EventEmitter();
       this._defaultCursor = this._elem.style.cursor;
@@ -69,7 +70,7 @@ this.dragEnabled = true;
     };
-    __decorate([core_1.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DraggableComponent.prototype, "draggable", null);
-    __decorate([core_1.Input(), __metadata('design:type', Object)], DraggableComponent.prototype, "dragData", void 0);
-    __decorate([core_1.Output("onDragSuccess"), __metadata('design:type', core_1.EventEmitter)], DraggableComponent.prototype, "onDragSuccessCallback", void 0);
-    __decorate([core_1.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DraggableComponent.prototype, "dropzones", null);
-    DraggableComponent = __decorate([core_1.Directive({selector: '[dnd-draggable]'}), __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig])], DraggableComponent);
+    __decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DraggableComponent.prototype, "draggable", null);
+    __decorate([core_2.Input(), __metadata('design:type', Object)], DraggableComponent.prototype, "dragData", void 0);
+    __decorate([core_2.Output("onDragSuccess"), __metadata('design:type', core_2.EventEmitter)], DraggableComponent.prototype, "onDragSuccessCallback", void 0);
+    __decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DraggableComponent.prototype, "dropzones", null);
+    DraggableComponent = __decorate([core_2.Directive({selector: '[dnd-draggable]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], DraggableComponent);
     return DraggableComponent;
@@ -112,2 +113,3 @@ })(dnd_component_1.AbstractComponent);
   var core_1 = $__require('angular2/core');
+  var core_2 = $__require('angular2/core');
   var dnd_component_1 = $__require('./dnd.component');
@@ -118,8 +120,8 @@ var dnd_config_1 = $__require('./dnd.config');
     __extends(DroppableComponent, _super);
-    function DroppableComponent(elemRef, _dragDropService, _config) {
-      _super.call(this, elemRef, _dragDropService, _config);
-      this.onDropSuccessCallback = new core_1.EventEmitter();
-      this.onDragEnterCallback = new core_1.EventEmitter();
-      this.onDragOverCallback = new core_1.EventEmitter();
-      this.onDragLeaveCallback = new core_1.EventEmitter();
+    function DroppableComponent(elemRef, dragDropService, config, cdr) {
+      _super.call(this, elemRef, dragDropService, config, cdr);
+      this.onDropSuccessCallback = new core_2.EventEmitter();
+      this.onDragEnterCallback = new core_2.EventEmitter();
+      this.onDragOverCallback = new core_2.EventEmitter();
+      this.onDragLeaveCallback = new core_2.EventEmitter();
       this.dropEnabled = true;
@@ -164,9 +166,9 @@ }
     };
-    __decorate([core_1.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DroppableComponent.prototype, "droppable", null);
-    __decorate([core_1.Output("onDropSuccess"), __metadata('design:type', core_1.EventEmitter)], DroppableComponent.prototype, "onDropSuccessCallback", void 0);
-    __decorate([core_1.Output("onDragEnter"), __metadata('design:type', core_1.EventEmitter)], DroppableComponent.prototype, "onDragEnterCallback", void 0);
-    __decorate([core_1.Output("onDragOver"), __metadata('design:type', core_1.EventEmitter)], DroppableComponent.prototype, "onDragOverCallback", void 0);
-    __decorate([core_1.Output("onDragLeave"), __metadata('design:type', core_1.EventEmitter)], DroppableComponent.prototype, "onDragLeaveCallback", void 0);
-    __decorate([core_1.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DroppableComponent.prototype, "dropzones", null);
-    DroppableComponent = __decorate([core_1.Directive({selector: '[dnd-droppable]'}), __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig])], DroppableComponent);
+    __decorate([core_2.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DroppableComponent.prototype, "droppable", null);
+    __decorate([core_2.Output("onDropSuccess"), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDropSuccessCallback", void 0);
+    __decorate([core_2.Output("onDragEnter"), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragEnterCallback", void 0);
+    __decorate([core_2.Output("onDragOver"), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragOverCallback", void 0);
+    __decorate([core_2.Output("onDragLeave"), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragLeaveCallback", void 0);
+    __decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DroppableComponent.prototype, "dropzones", null);
+    DroppableComponent = __decorate([core_2.Directive({selector: '[dnd-droppable]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], DroppableComponent);
     return DroppableComponent;
@@ -209,2 +211,3 @@ })(dnd_component_1.AbstractComponent);
   var core_1 = $__require('angular2/core');
+  var core_2 = $__require('angular2/core');
   var dnd_component_1 = $__require('./dnd.component');
@@ -215,4 +218,4 @@ var dnd_config_1 = $__require('./dnd.config');
     __extends(SortableContainer, _super);
-    function SortableContainer(elemRef, _dragDropService, _config, _sortableDataService) {
-      _super.call(this, elemRef, _dragDropService, _config);
+    function SortableContainer(elemRef, dragDropService, config, cdr, _sortableDataService) {
+      _super.call(this, elemRef, dragDropService, config, cdr);
       this._sortableDataService = _sortableDataService;
@@ -255,7 +258,8 @@ this._sortableData = [];
       }
+      this.detectChanges();
     };
-    __decorate([core_1.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableContainer.prototype, "draggable", null);
-    __decorate([core_1.Input(), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "sortableData", null);
-    __decorate([core_1.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "dropzones", null);
-    SortableContainer = __decorate([core_1.Directive({selector: '[dnd-sortable-container]'}), __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, dnd_service_1.DragDropSortableService])], SortableContainer);
+    __decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableContainer.prototype, "draggable", null);
+    __decorate([core_2.Input(), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "sortableData", null);
+    __decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "dropzones", null);
+    SortableContainer = __decorate([core_2.Directive({selector: '[dnd-sortable-container]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef, dnd_service_1.DragDropSortableService])], SortableContainer);
     return SortableContainer;
@@ -266,11 +270,11 @@ })(dnd_component_1.AbstractComponent);
     __extends(SortableComponent, _super);
-    function SortableComponent(elemRef, _dragDropService, _config, _sortableContainer, _sortableDataService) {
-      _super.call(this, elemRef, _dragDropService, _config);
+    function SortableComponent(elemRef, dragDropService, config, _sortableContainer, _sortableDataService, cdr) {
+      _super.call(this, elemRef, dragDropService, config, cdr);
       this._sortableContainer = _sortableContainer;
       this._sortableDataService = _sortableDataService;
-      this.onDragSuccessCallback = new core_1.EventEmitter();
-      this.onDragStartCallback = new core_1.EventEmitter();
-      this.onDragOverCallback = new core_1.EventEmitter();
-      this.onDragEndCallback = new core_1.EventEmitter();
-      this.onDropSuccessCallback = new core_1.EventEmitter();
+      this.onDragSuccessCallback = new core_2.EventEmitter();
+      this.onDragStartCallback = new core_2.EventEmitter();
+      this.onDragOverCallback = new core_2.EventEmitter();
+      this.onDragEndCallback = new core_2.EventEmitter();
+      this.onDropSuccessCallback = new core_2.EventEmitter();
       this.dropZones = this._sortableContainer.dropZones;
@@ -332,13 +336,14 @@ this.dragEnabled = true;
       }
+      this._sortableContainer.detectChanges();
     };
-    __decorate([core_1.Input('sortableIndex'), __metadata('design:type', Number)], SortableComponent.prototype, "index", void 0);
-    __decorate([core_1.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "draggable", null);
-    __decorate([core_1.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "droppable", null);
-    __decorate([core_1.Input(), __metadata('design:type', Object)], SortableComponent.prototype, "dragData", void 0);
-    __decorate([core_1.Output("onDragSuccess"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDragSuccessCallback", void 0);
-    __decorate([core_1.Output("onDragStart"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDragStartCallback", void 0);
-    __decorate([core_1.Output("onDragOver"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDragOverCallback", void 0);
-    __decorate([core_1.Output("onDragEnd"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDragEndCallback", void 0);
-    __decorate([core_1.Output("onDropSuccess"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDropSuccessCallback", void 0);
-    SortableComponent = __decorate([core_1.Directive({selector: '[dnd-sortable]'}), __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, SortableContainer, dnd_service_1.DragDropSortableService])], SortableComponent);
+    __decorate([core_2.Input('sortableIndex'), __metadata('design:type', Number)], SortableComponent.prototype, "index", void 0);
+    __decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "draggable", null);
+    __decorate([core_2.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "droppable", null);
+    __decorate([core_2.Input(), __metadata('design:type', Object)], SortableComponent.prototype, "dragData", void 0);
+    __decorate([core_2.Output("onDragSuccess"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragSuccessCallback", void 0);
+    __decorate([core_2.Output("onDragStart"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragStartCallback", void 0);
+    __decorate([core_2.Output("onDragOver"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragOverCallback", void 0);
+    __decorate([core_2.Output("onDragEnd"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragEndCallback", void 0);
+    __decorate([core_2.Output("onDropSuccess"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDropSuccessCallback", void 0);
+    SortableComponent = __decorate([core_2.Directive({selector: '[dnd-sortable]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, SortableContainer, dnd_service_1.DragDropSortableService, core_1.ChangeDetectorRef])], SortableComponent);
     return SortableComponent;
@@ -502,6 +507,7 @@ })(dnd_component_1.AbstractComponent);
   var AbstractComponent = (function() {
-    function AbstractComponent(elemRef, _dragDropService, _config) {
+    function AbstractComponent(elemRef, _dragDropService, _config, _cdr) {
       var _this = this;
       this._dragDropService = _dragDropService;
       this._config = _config;
+      this._cdr = _cdr;
       this._dragEnabled = false;
@@ -520,2 +526,3 @@ this.dropEnabled = false;
         }
+        return false;
       };
@@ -542,8 +549,2 @@ this._elem.ondragleave = function(event) {
       };
-      this._elem.ontouchstart = function(event) {
-        _this._onDragStart(event);
-      };
-      this._elem.ontouchend = function(event) {
-        _this._onDragEnd(event);
-      };
     }
@@ -564,5 +565,10 @@ Object.defineProperty(AbstractComponent.prototype, "dragEnabled", {
     });
+    AbstractComponent.prototype.detectChanges = function() {
+      var _this = this;
+      setTimeout(function() {
+        _this._cdr.detectChanges();
+      }, 250);
+    };
     AbstractComponent.prototype._onDragEnter = function(event) {
       if (this._isDropAllowed) {
-        event.preventDefault();
         this._onDragEnterCallback(event);
@@ -573,3 +579,5 @@ }
       if (this._isDropAllowed) {
-        event.preventDefault();
+        if (event.preventDefault) {
+          event.preventDefault();
+        }
         this._onDragOverCallback(event);
@@ -580,3 +588,2 @@ }
       if (this._isDropAllowed) {
-        event.preventDefault();
         this._onDragLeaveCallback(event);
@@ -587,4 +594,10 @@ }
       if (this._isDropAllowed) {
-        event.preventDefault();
+        if (event.preventDefault) {
+          event.preventDefault();
+        }
+        if (event.stopPropagation) {
+          event.stopPropagation();
+        }
         this._onDropCallback(event);
+        this.detectChanges();
       }
@@ -626,3 +639,3 @@ };
     AbstractComponent.prototype._onDragEndCallback = function(event) {};
-    AbstractComponent = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig])], AbstractComponent);
+    AbstractComponent = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], AbstractComponent);
     return AbstractComponent;
@@ -629,0 +642,0 @@ })();

bundles/ng2-dnd.min.js

@@ -1,2 +0,2 @@
-System.registerDynamic("src/dnd.draggable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("./dnd.component"),c=e("./dnd.config"),l=e("./dnd.service"),d=function(e){function t(t,r,a){e.call(this,t,r,a),this.onDragSuccessCallback=new i.EventEmitter,this._defaultCursor=this._elem.style.cursor,this.dragEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback,this._elem.classList.add(this._config.onDragStartClass)},t.prototype._onDragEndCallback=function(e){this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this._elem.classList.remove(this._config.onDragStartClass)},o([i.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([i.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([i.Output("onDragSuccess"),n("design:type",i.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([i.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([i.Directive({selector:"[dnd-draggable]"}),n("design:paramtypes",[i.ElementRef,l.DragDropService,c.DragDropConfig])],t)}(s.AbstractComponent);return t.DraggableComponent=d,r.exports}),System.registerDynamic("src/dnd.droppable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("./dnd.component"),c=e("./dnd.config"),l=e("./dnd.service"),d=function(e){function t(t,r,a){e.call(this,t,r,a),this.onDropSuccessCallback=new i.EventEmitter,this.onDragEnterCallback=new i.EventEmitter,this.onDragOverCallback=new i.EventEmitter,this.onDragLeaveCallback=new i.EventEmitter,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){this._elem.classList.add(this._config.onDragEnterClass),this.onDragEnterCallback.emit(this._dragDropService.dragData)},t.prototype._onDragOverCallback=function(e){this._elem.classList.add(this._config.onDragOverClass),this.onDragOverCallback.emit(this._dragDropService.dragData)},t.prototype._onDragLeaveCallback=function(e){this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass),this.onDragLeaveCallback.emit(this._dragDropService.dragData)},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData),this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass)},o([i.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([i.Output("onDropSuccess"),n("design:type",i.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),o([i.Output("onDragEnter"),n("design:type",i.EventEmitter)],t.prototype,"onDragEnterCallback",void 0),o([i.Output("onDragOver"),n("design:type",i.EventEmitter)],t.prototype,"onDragOverCallback",void 0),o([i.Output("onDragLeave"),n("design:type",i.EventEmitter)],t.prototype,"onDragLeaveCallback",void 0),o([i.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([i.Directive({selector:"[dnd-droppable]"}),n("design:paramtypes",[i.ElementRef,l.DragDropService,c.DragDropConfig])],t)}(s.AbstractComponent);return t.DroppableComponent=d,r.exports}),System.registerDynamic("src/dnd.sortable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("./dnd.component"),c=e("./dnd.config"),l=e("./dnd.service"),d=function(e){function t(t,r,a,o){e.call(this,t,r,a),this._sortableDataService=o,this._sortableData=[],this.dragEnabled=!1}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sortableData",{get:function(){return this._sortableData},set:function(e){this._sortableData=e,this.dropEnabled=0===this._sortableData.length},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){var t=this._sortableDataService.sortableData[this._sortableDataService.index];-1===this._sortableData.indexOf(t)&&(this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableData.push(t),this._sortableDataService.sortableData=this._sortableData,this._sortableDataService.index=0)},o([i.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([i.Input(),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"sortableData",null),o([i.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([i.Directive({selector:"[dnd-sortable-container]"}),n("design:paramtypes",[i.ElementRef,l.DragDropService,c.DragDropConfig,l.DragDropSortableService])],t)}(s.AbstractComponent);t.SortableContainer=d;var p=function(e){function t(t,r,a,o,n){e.call(this,t,r,a),this._sortableContainer=o,this._sortableDataService=n,this.onDragSuccessCallback=new i.EventEmitter,this.onDragStartCallback=new i.EventEmitter,this.onDragOverCallback=new i.EventEmitter,this.onDragEndCallback=new i.EventEmitter,this.onDropSuccessCallback=new i.EventEmitter,this.dropZones=this._sortableContainer.dropZones,this.dragEnabled=!0,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback},t.prototype._onDragOverCallback=function(e){this._elem!=this._sortableDataService.elem&&(this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this.onDragOverCallback.emit(this._dragDropService.dragData))},t.prototype._onDragEndCallback=function(e){this._sortableDataService.sortableData=null,this._sortableDataService.index=null,this._sortableDataService.markSortable(null),this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this.onDragEndCallback.emit(this._dragDropService.dragData)},t.prototype._onDragEnterCallback=function(e){if(this._sortableDataService.markSortable(this._elem),this.index!==this._sortableDataService.index||this._sortableDataService.sortableData!=this._sortableContainer.sortableData){var t=this._sortableDataService.sortableData[this._sortableDataService.index];this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableContainer.sortableData.splice(this.index,0,t),this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index}},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData)},o([i.Input("sortableIndex"),n("design:type",Number)],t.prototype,"index",void 0),o([i.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([i.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([i.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([i.Output("onDragSuccess"),n("design:type",i.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([i.Output("onDragStart"),n("design:type",i.EventEmitter)],t.prototype,"onDragStartCallback",void 0),o([i.Output("onDragOver"),n("design:type",i.EventEmitter)],t.prototype,"onDragOverCallback",void 0),o([i.Output("onDragEnd"),n("design:type",i.EventEmitter)],t.prototype,"onDragEndCallback",void 0),o([i.Output("onDropSuccess"),n("design:type",i.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),t=o([i.Directive({selector:"[dnd-sortable]"}),n("design:paramtypes",[i.ElementRef,l.DragDropService,c.DragDropConfig,d,l.DragDropSortableService])],t)}(s.AbstractComponent);return t.SortableComponent=p,r.exports}),System.registerDynamic("src/dnd.config",["angular2/core"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=function(){function e(e){this.name=e}return e.COPY=new e("copy"),e.LINK=new e("link"),e.MOVE=new e("move"),e.NONE=new e("none"),e=a([n.Injectable(),o("design:paramtypes",[String])],e)}();t.DataTransferEffect=i;var s=function(){function e(e,t,r){void 0===t&&(t=0),void 0===r&&(r=0),this.imageElement=e,this.x_offset=t,this.y_offset=r}return e=a([n.Injectable(),o("design:paramtypes",[HTMLElement,Number,Number])],e)}();t.DragImage=s;var c=function(){function e(){this.onDragStartClass="dnd-drag-start",this.onDragEnterClass="dnd-drag-enter",this.onDragOverClass="dnd-drag-over",this.onSortableDragClass="dnd-sortable-drag",this.dragEffect=i.MOVE,this.dropEffect=i.MOVE,this.dragCursor="move"}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();return t.DragDropConfig=c,r.exports}),System.registerDynamic("src/dnd.service",["angular2/core","angular2/src/facade/lang","./dnd.config"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=e("angular2/src/facade/lang"),s=e("./dnd.config"),c=function(){function e(){this.allowedDropZones=[]}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();t.DragDropService=c;var l=function(){function e(e){this._config=e}return Object.defineProperty(e.prototype,"elem",{get:function(){return this._elem},enumerable:!0,configurable:!0}),e.prototype.markSortable=function(e){i.isPresent(this._elem)&&this._elem.classList.remove(this._config.onSortableDragClass),i.isPresent(e)&&(this._elem=e,this._elem.classList.add(this._config.onSortableDragClass))},e=a([n.Injectable(),o("design:paramtypes",[s.DragDropConfig])],e)}();return t.DragDropSortableService=l,r.exports}),System.registerDynamic("src/dnd.component",["angular2/core","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=e("angular2/core"),s=e("./dnd.config"),c=e("./dnd.service"),l=function(){function e(e,t,r){var a=this;this._dragDropService=t,this._config=r,this._dragEnabled=!1,this.dropEnabled=!1,this.dropZones=[],this._elem=e.nativeElement,this.dragEnabled=!0,this._elem.ondragenter=function(e){a._onDragEnter(e)},this._elem.ondragover=function(e){a._onDragOver(e),null!=e.dataTransfer&&(e.dataTransfer.dropEffect=a._config.dropEffect.name)},this._elem.ondragleave=function(e){a._onDragLeave(e)},this._elem.ondrop=function(e){a._onDrop(e)},this._elem.ondragstart=function(e){if(a._onDragStart(e),null!=e.dataTransfer&&(e.dataTransfer.effectAllowed=a._config.dragEffect.name,e.dataTransfer.setData("text",""),null!=a._config.dragImage)){var t=a._config.dragImage;e.dataTransfer.setDragImage(t.imageElement,t.x_offset,t.y_offset)}},this._elem.ondragend=function(e){a._onDragEnd(e)},this._elem.ontouchstart=function(e){a._onDragStart(e)},this._elem.ontouchend=function(e){a._onDragEnd(e)}}return Object.defineProperty(e.prototype,"dragEnabled",{get:function(){return this._dragEnabled},set:function(e){this._dragEnabled=!!e,this._elem.draggable=this._dragEnabled,null!=this._config.dragCursor&&(this._elem.style.cursor=this._dragEnabled?this._config.dragCursor:this._defaultCursor)},enumerable:!0,configurable:!0}),e.prototype._onDragEnter=function(e){this._isDropAllowed&&(e.preventDefault(),this._onDragEnterCallback(e))},e.prototype._onDragOver=function(e){this._isDropAllowed&&(e.preventDefault(),this._onDragOverCallback(e))},e.prototype._onDragLeave=function(e){this._isDropAllowed&&(e.preventDefault(),this._onDragLeaveCallback(e))},e.prototype._onDrop=function(e){this._isDropAllowed&&(e.preventDefault(),this._onDropCallback(e))},Object.defineProperty(e.prototype,"_isDropAllowed",{get:function(){if(this.dropEnabled){if(0===this.dropZones.length&&0===this._dragDropService.allowedDropZones.length)return!0;for(var e=0;e<this._dragDropService.allowedDropZones.length;e++){var t=this._dragDropService.allowedDropZones[e];if(-1!==this.dropZones.indexOf(t))return!0}}return!1},enumerable:!0,configurable:!0}),e.prototype._onDragStart=function(e){this._dragEnabled&&(this._dragDropService.allowedDropZones=this.dropZones,this._onDragStartCallback(e))},e.prototype._onDragEnd=function(e){this._dragDropService.allowedDropZones=[],this._onDragEndCallback(e)},e.prototype._onDragEnterCallback=function(e){},e.prototype._onDragOverCallback=function(e){},e.prototype._onDragLeaveCallback=function(e){},e.prototype._onDropCallback=function(e){},e.prototype._onDragStartCallback=function(e){},e.prototype._onDragEndCallback=function(e){},e=a([n.Injectable(),o("design:paramtypes",[i.ElementRef,c.DragDropService,s.DragDropConfig])],e)}();return t.AbstractComponent=l,r.exports}),System.registerDynamic("ng2-dnd",["./src/dnd.config","./src/dnd.service","./src/dnd.draggable","./src/dnd.droppable","./src/dnd.sortable","./src/dnd.component"],!0,function(e,t,r){"use strict";function a(e){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}var o=e("./src/dnd.config"),n=e("./src/dnd.service"),i=e("./src/dnd.draggable"),s=e("./src/dnd.droppable"),c=e("./src/dnd.sortable");return a(e("./src/dnd.component")),a(e("./src/dnd.config")),a(e("./src/dnd.service")),a(e("./src/dnd.draggable")),a(e("./src/dnd.droppable")),a(e("./src/dnd.sortable")),t.DND_PROVIDERS=[o.DragDropConfig,n.DragDropService,n.DragDropSortableService],t.DND_DIRECTIVES=[i.DraggableComponent,s.DroppableComponent,c.SortableContainer,c.SortableComponent],r.exports});
+System.registerDynamic("src/dnd.draggable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("angular2/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,o){e.call(this,t,r,a,o),this.onDragSuccessCallback=new s.EventEmitter,this._defaultCursor=this._elem.style.cursor,this.dragEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback,this._elem.classList.add(this._config.onDragStartClass)},t.prototype._onDragEndCallback=function(e){this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this._elem.classList.remove(this._config.onDragStartClass)},o([s.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([s.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([s.Output("onDragSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([s.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([s.Directive({selector:"[dnd-draggable]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DraggableComponent=p,r.exports}),System.registerDynamic("src/dnd.droppable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("angular2/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,o){e.call(this,t,r,a,o),this.onDropSuccessCallback=new s.EventEmitter,this.onDragEnterCallback=new s.EventEmitter,this.onDragOverCallback=new s.EventEmitter,this.onDragLeaveCallback=new s.EventEmitter,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){this._elem.classList.add(this._config.onDragEnterClass),this.onDragEnterCallback.emit(this._dragDropService.dragData)},t.prototype._onDragOverCallback=function(e){this._elem.classList.add(this._config.onDragOverClass),this.onDragOverCallback.emit(this._dragDropService.dragData)},t.prototype._onDragLeaveCallback=function(e){this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass),this.onDragLeaveCallback.emit(this._dragDropService.dragData)},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData),this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass)},o([s.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([s.Output("onDropSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),o([s.Output("onDragEnter"),n("design:type",s.EventEmitter)],t.prototype,"onDragEnterCallback",void 0),o([s.Output("onDragOver"),n("design:type",s.EventEmitter)],t.prototype,"onDragOverCallback",void 0),o([s.Output("onDragLeave"),n("design:type",s.EventEmitter)],t.prototype,"onDragLeaveCallback",void 0),o([s.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([s.Directive({selector:"[dnd-droppable]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DroppableComponent=p,r.exports}),System.registerDynamic("src/dnd.sortable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("angular2/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,o,n){e.call(this,t,r,a,o),this._sortableDataService=n,this._sortableData=[],this.dragEnabled=!1}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sortableData",{get:function(){return this._sortableData},set:function(e){this._sortableData=e,this.dropEnabled=0===this._sortableData.length},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){var t=this._sortableDataService.sortableData[this._sortableDataService.index];-1===this._sortableData.indexOf(t)&&(this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableData.push(t),this._sortableDataService.sortableData=this._sortableData,this._sortableDataService.index=0),this.detectChanges()},o([s.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([s.Input(),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"sortableData",null),o([s.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([s.Directive({selector:"[dnd-sortable-container]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef,d.DragDropSortableService])],t)}(c.AbstractComponent);t.SortableContainer=p;var g=function(e){function t(t,r,a,o,n,i){e.call(this,t,r,a,i),this._sortableContainer=o,this._sortableDataService=n,this.onDragSuccessCallback=new s.EventEmitter,this.onDragStartCallback=new s.EventEmitter,this.onDragOverCallback=new s.EventEmitter,this.onDragEndCallback=new s.EventEmitter,this.onDropSuccessCallback=new s.EventEmitter,this.dropZones=this._sortableContainer.dropZones,this.dragEnabled=!0,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback},t.prototype._onDragOverCallback=function(e){this._elem!=this._sortableDataService.elem&&(this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this.onDragOverCallback.emit(this._dragDropService.dragData))},t.prototype._onDragEndCallback=function(e){this._sortableDataService.sortableData=null,this._sortableDataService.index=null,this._sortableDataService.markSortable(null),this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this.onDragEndCallback.emit(this._dragDropService.dragData)},t.prototype._onDragEnterCallback=function(e){if(this._sortableDataService.markSortable(this._elem),this.index!==this._sortableDataService.index||this._sortableDataService.sortableData!=this._sortableContainer.sortableData){var t=this._sortableDataService.sortableData[this._sortableDataService.index];this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableContainer.sortableData.splice(this.index,0,t),this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index}},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData),this._sortableContainer.detectChanges()},o([s.Input("sortableIndex"),n("design:type",Number)],t.prototype,"index",void 0),o([s.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([s.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([s.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([s.Output("onDragSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([s.Output("onDragStart"),n("design:type",s.EventEmitter)],t.prototype,"onDragStartCallback",void 0),o([s.Output("onDragOver"),n("design:type",s.EventEmitter)],t.prototype,"onDragOverCallback",void 0),o([s.Output("onDragEnd"),n("design:type",s.EventEmitter)],t.prototype,"onDragEndCallback",void 0),o([s.Output("onDropSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),t=o([s.Directive({selector:"[dnd-sortable]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,p,d.DragDropSortableService,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.SortableComponent=g,r.exports}),System.registerDynamic("src/dnd.config",["angular2/core"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=function(){function e(e){this.name=e}return e.COPY=new e("copy"),e.LINK=new e("link"),e.MOVE=new e("move"),e.NONE=new e("none"),e=a([n.Injectable(),o("design:paramtypes",[String])],e)}();t.DataTransferEffect=i;var s=function(){function e(e,t,r){void 0===t&&(t=0),void 0===r&&(r=0),this.imageElement=e,this.x_offset=t,this.y_offset=r}return e=a([n.Injectable(),o("design:paramtypes",[HTMLElement,Number,Number])],e)}();t.DragImage=s;var c=function(){function e(){this.onDragStartClass="dnd-drag-start",this.onDragEnterClass="dnd-drag-enter",this.onDragOverClass="dnd-drag-over",this.onSortableDragClass="dnd-sortable-drag",this.dragEffect=i.MOVE,this.dropEffect=i.MOVE,this.dragCursor="move"}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();return t.DragDropConfig=c,r.exports}),System.registerDynamic("src/dnd.service",["angular2/core","angular2/src/facade/lang","./dnd.config"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=e("angular2/src/facade/lang"),s=e("./dnd.config"),c=function(){function e(){this.allowedDropZones=[]}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();t.DragDropService=c;var l=function(){function e(e){this._config=e}return Object.defineProperty(e.prototype,"elem",{get:function(){return this._elem},enumerable:!0,configurable:!0}),e.prototype.markSortable=function(e){i.isPresent(this._elem)&&this._elem.classList.remove(this._config.onSortableDragClass),i.isPresent(e)&&(this._elem=e,this._elem.classList.add(this._config.onSortableDragClass))},e=a([n.Injectable(),o("design:paramtypes",[s.DragDropConfig])],e)}();return t.DragDropSortableService=l,r.exports}),System.registerDynamic("src/dnd.component",["angular2/core","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=e("angular2/core"),s=e("./dnd.config"),c=e("./dnd.service"),l=function(){function e(e,t,r,a){var o=this;this._dragDropService=t,this._config=r,this._cdr=a,this._dragEnabled=!1,this.dropEnabled=!1,this.dropZones=[],this._elem=e.nativeElement,this.dragEnabled=!0,this._elem.ondragenter=function(e){o._onDragEnter(e)},this._elem.ondragover=function(e){return o._onDragOver(e),null!=e.dataTransfer&&(e.dataTransfer.dropEffect=o._config.dropEffect.name),!1},this._elem.ondragleave=function(e){o._onDragLeave(e)},this._elem.ondrop=function(e){o._onDrop(e)},this._elem.ondragstart=function(e){if(o._onDragStart(e),null!=e.dataTransfer&&(e.dataTransfer.effectAllowed=o._config.dragEffect.name,e.dataTransfer.setData("text",""),null!=o._config.dragImage)){var t=o._config.dragImage;e.dataTransfer.setDragImage(t.imageElement,t.x_offset,t.y_offset)}},this._elem.ondragend=function(e){o._onDragEnd(e)}}return Object.defineProperty(e.prototype,"dragEnabled",{get:function(){return this._dragEnabled},set:function(e){this._dragEnabled=!!e,this._elem.draggable=this._dragEnabled,null!=this._config.dragCursor&&(this._elem.style.cursor=this._dragEnabled?this._config.dragCursor:this._defaultCursor)},enumerable:!0,configurable:!0}),e.prototype.detectChanges=function(){var e=this;setTimeout(function(){e._cdr.detectChanges()},250)},e.prototype._onDragEnter=function(e){this._isDropAllowed&&this._onDragEnterCallback(e)},e.prototype._onDragOver=function(e){this._isDropAllowed&&(e.preventDefault&&e.preventDefault(),this._onDragOverCallback(e))},e.prototype._onDragLeave=function(e){this._isDropAllowed&&this._onDragLeaveCallback(e)},e.prototype._onDrop=function(e){this._isDropAllowed&&(e.preventDefault&&e.preventDefault(),e.stopPropagation&&e.stopPropagation(),this._onDropCallback(e),this.detectChanges())},Object.defineProperty(e.prototype,"_isDropAllowed",{get:function(){if(this.dropEnabled){if(0===this.dropZones.length&&0===this._dragDropService.allowedDropZones.length)return!0;for(var e=0;e<this._dragDropService.allowedDropZones.length;e++){var t=this._dragDropService.allowedDropZones[e];if(-1!==this.dropZones.indexOf(t))return!0}}return!1},enumerable:!0,configurable:!0}),e.prototype._onDragStart=function(e){this._dragEnabled&&(this._dragDropService.allowedDropZones=this.dropZones,this._onDragStartCallback(e))},e.prototype._onDragEnd=function(e){this._dragDropService.allowedDropZones=[],this._onDragEndCallback(e)},e.prototype._onDragEnterCallback=function(e){},e.prototype._onDragOverCallback=function(e){},e.prototype._onDragLeaveCallback=function(e){},e.prototype._onDropCallback=function(e){},e.prototype._onDragStartCallback=function(e){},e.prototype._onDragEndCallback=function(e){},e=a([n.Injectable(),o("design:paramtypes",[i.ElementRef,c.DragDropService,s.DragDropConfig,n.ChangeDetectorRef])],e)}();return t.AbstractComponent=l,r.exports}),System.registerDynamic("ng2-dnd",["./src/dnd.config","./src/dnd.service","./src/dnd.draggable","./src/dnd.droppable","./src/dnd.sortable","./src/dnd.component"],!0,function(e,t,r){"use strict";function a(e){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}var o=e("./src/dnd.config"),n=e("./src/dnd.service"),i=e("./src/dnd.draggable"),s=e("./src/dnd.droppable"),c=e("./src/dnd.sortable");return a(e("./src/dnd.component")),a(e("./src/dnd.config")),a(e("./src/dnd.service")),a(e("./src/dnd.draggable")),a(e("./src/dnd.droppable")),a(e("./src/dnd.sortable")),t.DND_PROVIDERS=[o.DragDropConfig,n.DragDropService,n.DragDropSortableService],t.DND_DIRECTIVES=[i.DraggableComponent,s.DroppableComponent,c.SortableContainer,c.SortableComponent],r.exports});
 //# sourceMappingURL=bundles/ng2-dnd.min.js.map

package.json

@@ -58,3 +58,3 @@ {
   "dependencies": {},
-  "version": "1.4.0"
+  "version": "1.4.1"
 }

src/dnd.component.d.ts

@@ -0,1 +1,2 @@
+import { ChangeDetectorRef } from 'angular2/core';
 import { ElementRef } from 'angular2/core';
@@ -7,2 +8,3 @@ import { DragDropConfig } from './dnd.config';
     _config: DragDropConfig;
+    private _cdr;
     _elem: HTMLElement;
@@ -22,3 +24,5 @@ _defaultCursor: string;
     dropZones: string[];
-    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config: DragDropConfig);
+    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config: DragDropConfig, _cdr: ChangeDetectorRef);
+    /******* Change detection ******/
+    detectChanges(): void;
     private _onDragEnter(event);
@@ -25,0 +29,0 @@ private _onDragOver(event);

src/dnd.component.js

@@ -18,6 +18,7 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 var AbstractComponent = (function () {
-    function AbstractComponent(elemRef, _dragDropService, _config) {
+    function AbstractComponent(elemRef, _dragDropService, _config, _cdr) {
         var _this = this;
         this._dragDropService = _dragDropService;
         this._config = _config;
+        this._cdr = _cdr;
         /**
@@ -46,2 +47,3 @@ * Whether the object is draggable. Default is true.
             }
+            return false;
         };
@@ -78,10 +80,10 @@ this._elem.ondragleave = function (event) {
         };
-        this._elem.ontouchstart = function (event) {
-            // console.log('ontouchstart', event.target);
-            _this._onDragStart(event);
-        };
-        this._elem.ontouchend = function (event) {
-            // console.log('ontouchend', event.target);
-            _this._onDragEnd(event);
-        };
+        // this._elem.ontouchstart = (event: Event) => {
+        //     // console.log('ontouchstart', event.target);
+        //     this._onDragStart(event);
+        // };
+        // this._elem.ontouchend = (event: Event) => {
+        //     // console.log('ontouchend', event.target);
+        //     this._onDragEnd(event);
+        // };
     }
@@ -103,2 +105,10 @@ Object.defineProperty(AbstractComponent.prototype, "dragEnabled", {
     });
+    /******* Change detection ******/
+    AbstractComponent.prototype.detectChanges = function () {
+        var _this = this;
+        // Programmatically run change detection to fix issue in Safari
+        setTimeout(function () {
+            _this._cdr.detectChanges();
+        }, 250);
+    };
     //****** Droppable *******//
@@ -108,3 +118,3 @@ AbstractComponent.prototype._onDragEnter = function (event) {
         if (this._isDropAllowed) {
-            event.preventDefault();
+            // event.preventDefault();
             this._onDragEnterCallback(event);
@@ -116,3 +126,7 @@ }
         if (this._isDropAllowed) {
-            event.preventDefault();
+            // The element is over the same source element - do nothing
+            if (event.preventDefault) {
+                // Necessary. Allows us to drop.
+                event.preventDefault();
+            }
             this._onDragOverCallback(event);
@@ -124,3 +138,3 @@ }
         if (this._isDropAllowed) {
-            event.preventDefault();
+            // event.preventDefault();
             this._onDragLeaveCallback(event);
@@ -132,4 +146,12 @@ }
         if (this._isDropAllowed) {
-            event.preventDefault();
+            if (event.preventDefault) {
+                // Necessary. Allows us to drop.
+                event.preventDefault();
+            }
+            if (event.stopPropagation) {
+                // Necessary. Allows us to drop.
+                event.stopPropagation();
+            }
             this._onDropCallback(event);
+            this.detectChanges();
         }
@@ -179,3 +201,3 @@ };
         core_1.Injectable(), 
-        __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig])
+        __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])
     ], AbstractComponent);
@@ -182,0 +204,0 @@ return AbstractComponent;

src/dnd.component.ts

@@ -5,3 +5,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 
-import {Injectable} from 'angular2/core';
+import {Injectable, ChangeDetectorRef} from 'angular2/core';
 import {Directive, Input, Output, EventEmitter, ElementRef} from 'angular2/core';
@@ -35,10 +35,12 @@
 
-     /**
-     * Array of Strings. It permits to specify the drop zones associated with this component.
-     * By default, if the drop-zones attribute is not specified, the droppable component accepts
-     * drop operations by all the draggable components that do not specify the allowed-drop-zones
-     */
+    /**
+    * Array of Strings. It permits to specify the drop zones associated with this component.
+    * By default, if the drop-zones attribute is not specified, the droppable component accepts
+    * drop operations by all the draggable components that do not specify the allowed-drop-zones
+    */
     dropZones: string[] = [];
 
-    constructor(elemRef: ElementRef, public _dragDropService: DragDropService, public _config:DragDropConfig) {
+    constructor(elemRef: ElementRef, public _dragDropService: DragDropService, public _config: DragDropConfig,
+        private _cdr: ChangeDetectorRef) {
+
         this._elem = elemRef.nativeElement;
@@ -56,2 +58,4 @@ this.dragEnabled = true;
             }
+
+            return false;
         };
@@ -84,4 +88,2 @@ this._elem.ondragleave = (event: Event) => {
                 }
-
-                // // console.log('ondragstart.dataTransfer', event.dataTransfer);
             }
@@ -93,11 +95,20 @@ };
         };
-        this._elem.ontouchstart = (event: Event) => {
-            // console.log('ontouchstart', event.target);
-            this._onDragStart(event);
-        };
-        this._elem.ontouchend = (event: Event) => {
-            // console.log('ontouchend', event.target);
-            this._onDragEnd(event);
-        };
+        // this._elem.ontouchstart = (event: Event) => {
+        //     // console.log('ontouchstart', event.target);
+        //     this._onDragStart(event);
+        // };
+        // this._elem.ontouchend = (event: Event) => {
+        //     // console.log('ontouchend', event.target);
+        //     this._onDragEnd(event);
+        // };
     }
+    
+    /******* Change detection ******/
+    
+    detectChanges() {
+        // Programmatically run change detection to fix issue in Safari
+        setTimeout(() => {
+            this._cdr.detectChanges();
+        }, 250);
+    }
 
@@ -108,3 +119,3 @@ //****** Droppable *******//
         if (this._isDropAllowed) {
-            event.preventDefault();
+            // event.preventDefault();
             this._onDragEnterCallback(event);
@@ -114,6 +125,11 @@ }
 
-    private _onDragOver(event: Event): void {
+    private _onDragOver(event: Event) {
         // // console.log('ondragover._isDropAllowed', this._isDropAllowed);
         if (this._isDropAllowed) {
-            event.preventDefault();
+            // The element is over the same source element - do nothing
+            if (event.preventDefault) {
+                // Necessary. Allows us to drop.
+                event.preventDefault();
+            }
+
             this._onDragOverCallback(event);
@@ -126,3 +142,3 @@ }
         if (this._isDropAllowed) {
-            event.preventDefault();
+            // event.preventDefault();
             this._onDragLeaveCallback(event);
@@ -135,4 +151,15 @@ }
         if (this._isDropAllowed) {
-            event.preventDefault();
+            if (event.preventDefault) {
+                // Necessary. Allows us to drop.
+                event.preventDefault();
+            }
+
+            if (event.stopPropagation) {
+                // Necessary. Allows us to drop.
+                event.stopPropagation();
+            }
+
             this._onDropCallback(event);
+
+            this.detectChanges();
         }
@@ -146,4 +173,4 @@ }
             }
-            for (let i:number = 0; i < this._dragDropService.allowedDropZones.length; i++) {
-                let dragZone:string = this._dragDropService.allowedDropZones[i];
+            for (let i: number = 0; i < this._dragDropService.allowedDropZones.length; i++) {
+                let dragZone: string = this._dragDropService.allowedDropZones[i];
                 if (this.dropZones.indexOf(dragZone) !== -1) {
@@ -175,10 +202,10 @@ return true;
     //**** Drop Callbacks ****//
-    _onDragEnterCallback(event: Event) {}
-    _onDragOverCallback(event: Event) {}
-    _onDragLeaveCallback(event: Event) {}
-    _onDropCallback(event: Event)  {}
-    
+    _onDragEnterCallback(event: Event) { }
+    _onDragOverCallback(event: Event) { }
+    _onDragLeaveCallback(event: Event) { }
+    _onDropCallback(event: Event) { }
+
     //**** Drag Callbacks ****//
-    _onDragStartCallback(event: Event) {}
-    _onDragEndCallback(event: Event) {}
+    _onDragStartCallback(event: Event) { }
+    _onDragEndCallback(event: Event) { }
 }

src/dnd.draggable.d.ts

@@ -0,1 +1,2 @@
+import { ChangeDetectorRef } from 'angular2/core';
 import { EventEmitter, ElementRef } from 'angular2/core';
@@ -17,5 +18,5 @@ import { AbstractComponent } from './dnd.component';
     dropzones: Array<string>;
-    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config: DragDropConfig);
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config: DragDropConfig, cdr: ChangeDetectorRef);
     _onDragStartCallback(event: Event): void;
     _onDragEndCallback(event: Event): void;
 }

src/dnd.draggable.js

@@ -19,2 +19,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 var core_1 = require('angular2/core');
+var core_2 = require('angular2/core');
 var dnd_component_1 = require('./dnd.component');
@@ -25,4 +26,4 @@ var dnd_config_1 = require('./dnd.config');
     __extends(DraggableComponent, _super);
-    function DraggableComponent(elemRef, _dragDropService, _config) {
-        _super.call(this, elemRef, _dragDropService, _config);
+    function DraggableComponent(elemRef, dragDropService, config, cdr) {
+        _super.call(this, elemRef, dragDropService, config, cdr);
         /**
@@ -32,3 +33,3 @@ * Callback function called when the drag action ends with a valid drop action.
          */
-        this.onDragSuccessCallback = new core_1.EventEmitter();
+        this.onDragSuccessCallback = new core_2.EventEmitter();
         this._defaultCursor = this._elem.style.cursor;
@@ -62,3 +63,3 @@ this.dragEnabled = true;
     __decorate([
-        core_1.Input("dragEnabled"), 
+        core_2.Input("dragEnabled"), 
         __metadata('design:type', Boolean), 
@@ -68,11 +69,11 @@ __metadata('design:paramtypes', [Boolean])
     __decorate([
-        core_1.Input(), 
+        core_2.Input(), 
         __metadata('design:type', Object)
     ], DraggableComponent.prototype, "dragData", void 0);
     __decorate([
-        core_1.Output("onDragSuccess"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDragSuccess"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], DraggableComponent.prototype, "onDragSuccessCallback", void 0);
     __decorate([
-        core_1.Input("dropZones"), 
+        core_2.Input("dropZones"), 
         __metadata('design:type', Array), 
@@ -82,4 +83,4 @@ __metadata('design:paramtypes', [Array])
     DraggableComponent = __decorate([
-        core_1.Directive({ selector: '[dnd-draggable]' }), 
-        __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig])
+        core_2.Directive({ selector: '[dnd-draggable]' }), 
+        __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])
     ], DraggableComponent);
@@ -86,0 +87,0 @@ return DraggableComponent;

src/dnd.draggable.ts

@@ -5,3 +5,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 
-import {Injectable} from 'angular2/core';
+import {Injectable, ChangeDetectorRef} from 'angular2/core';
 import {Directive, Input, Output, EventEmitter, ElementRef} from 'angular2/core';
@@ -35,4 +35,6 @@
 
-    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config:DragDropConfig) {
-        super(elemRef, _dragDropService, _config);
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, 
+        cdr:ChangeDetectorRef) {
+            
+        super(elemRef, dragDropService, config, cdr);
         this._defaultCursor = this._elem.style.cursor;
@@ -39,0 +41,0 @@ this.dragEnabled = true;

src/dnd.droppable.d.ts

@@ -0,1 +1,2 @@
+import { ChangeDetectorRef } from 'angular2/core';
 import { EventEmitter, ElementRef } from 'angular2/core';
@@ -16,3 +17,3 @@ import { AbstractComponent } from './dnd.component';
     dropzones: Array<string>;
-    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config: DragDropConfig);
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config: DragDropConfig, cdr: ChangeDetectorRef);
     _onDragEnterCallback(event: Event): void;
@@ -19,0 +20,0 @@ _onDragOverCallback(event: Event): void;

src/dnd.droppable.js

@@ -19,2 +19,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 var core_1 = require('angular2/core');
+var core_2 = require('angular2/core');
 var dnd_component_1 = require('./dnd.component');
@@ -25,4 +26,4 @@ var dnd_config_1 = require('./dnd.config');
     __extends(DroppableComponent, _super);
-    function DroppableComponent(elemRef, _dragDropService, _config) {
-        _super.call(this, elemRef, _dragDropService, _config);
+    function DroppableComponent(elemRef, dragDropService, config, cdr) {
+        _super.call(this, elemRef, dragDropService, config, cdr);
         /**
@@ -32,6 +33,6 @@ * Callback function called when the drop action completes correctly.
          */
-        this.onDropSuccessCallback = new core_1.EventEmitter();
-        this.onDragEnterCallback = new core_1.EventEmitter();
-        this.onDragOverCallback = new core_1.EventEmitter();
-        this.onDragLeaveCallback = new core_1.EventEmitter();
+        this.onDropSuccessCallback = new core_2.EventEmitter();
+        this.onDragEnterCallback = new core_2.EventEmitter();
+        this.onDragOverCallback = new core_2.EventEmitter();
+        this.onDragLeaveCallback = new core_2.EventEmitter();
         this.dropEnabled = true;
@@ -79,3 +80,3 @@ }
     __decorate([
-        core_1.Input("dropEnabled"), 
+        core_2.Input("dropEnabled"), 
         __metadata('design:type', Boolean), 
@@ -85,19 +86,19 @@ __metadata('design:paramtypes', [Boolean])
     __decorate([
-        core_1.Output("onDropSuccess"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDropSuccess"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], DroppableComponent.prototype, "onDropSuccessCallback", void 0);
     __decorate([
-        core_1.Output("onDragEnter"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDragEnter"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], DroppableComponent.prototype, "onDragEnterCallback", void 0);
     __decorate([
-        core_1.Output("onDragOver"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDragOver"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], DroppableComponent.prototype, "onDragOverCallback", void 0);
     __decorate([
-        core_1.Output("onDragLeave"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDragLeave"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], DroppableComponent.prototype, "onDragLeaveCallback", void 0);
     __decorate([
-        core_1.Input("dropZones"), 
+        core_2.Input("dropZones"), 
         __metadata('design:type', Array), 
@@ -107,4 +108,4 @@ __metadata('design:paramtypes', [Array])
     DroppableComponent = __decorate([
-        core_1.Directive({ selector: '[dnd-droppable]' }), 
-        __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig])
+        core_2.Directive({ selector: '[dnd-droppable]' }), 
+        __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])
     ], DroppableComponent);
@@ -111,0 +112,0 @@ return DroppableComponent;

src/dnd.droppable.ts

@@ -5,3 +5,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 
-import {Injectable} from 'angular2/core';
+import {Injectable, ChangeDetectorRef} from 'angular2/core';
 import {Directive, Input, Output, EventEmitter, ElementRef} from 'angular2/core';
@@ -34,4 +34,6 @@
 
-    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config:DragDropConfig) {
-        super(elemRef, _dragDropService, _config);
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, 
+        cdr:ChangeDetectorRef) {
+            
+        super(elemRef, dragDropService, config, cdr);
         
@@ -38,0 +40,0 @@ this.dropEnabled = true;

src/dnd.sortable.d.ts

@@ -0,1 +1,2 @@
+import { ChangeDetectorRef } from 'angular2/core';
 import { EventEmitter, ElementRef } from 'angular2/core';
@@ -11,3 +12,3 @@ import { AbstractComponent } from './dnd.component';
     dropzones: Array<string>;
-    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config: DragDropConfig, _sortableDataService: DragDropSortableService);
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config: DragDropConfig, cdr: ChangeDetectorRef, _sortableDataService: DragDropSortableService);
     _onDragEnterCallback(event: Event): void;
@@ -34,3 +35,3 @@ }
     onDropSuccessCallback: EventEmitter<any>;
-    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config: DragDropConfig, _sortableContainer: SortableContainer, _sortableDataService: DragDropSortableService);
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config: DragDropConfig, _sortableContainer: SortableContainer, _sortableDataService: DragDropSortableService, cdr: ChangeDetectorRef);
     _onDragStartCallback(event: Event): void;
@@ -37,0 +38,0 @@ _onDragOverCallback(event: Event): void;

src/dnd.sortable.js

@@ -19,2 +19,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 var core_1 = require('angular2/core');
+var core_2 = require('angular2/core');
 var dnd_component_1 = require('./dnd.component');
@@ -25,4 +26,4 @@ var dnd_config_1 = require('./dnd.config');
     __extends(SortableContainer, _super);
-    function SortableContainer(elemRef, _dragDropService, _config, _sortableDataService) {
-        _super.call(this, elemRef, _dragDropService, _config);
+    function SortableContainer(elemRef, dragDropService, config, cdr, _sortableDataService) {
+        _super.call(this, elemRef, dragDropService, config, cdr);
         this._sortableDataService = _sortableDataService;
@@ -72,5 +73,7 @@ this._sortableData = [];
         }
+        // Refresh changes in properties of container component
+        this.detectChanges();
     };
     __decorate([
-        core_1.Input("dragEnabled"), 
+        core_2.Input("dragEnabled"), 
         __metadata('design:type', Boolean), 
@@ -80,3 +83,3 @@ __metadata('design:paramtypes', [Boolean])
     __decorate([
-        core_1.Input(), 
+        core_2.Input(), 
         __metadata('design:type', Array), 
@@ -86,3 +89,3 @@ __metadata('design:paramtypes', [Array])
     __decorate([
-        core_1.Input("dropZones"), 
+        core_2.Input("dropZones"), 
         __metadata('design:type', Array), 
@@ -92,4 +95,4 @@ __metadata('design:paramtypes', [Array])
     SortableContainer = __decorate([
-        core_1.Directive({ selector: '[dnd-sortable-container]' }), 
-        __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, dnd_service_1.DragDropSortableService])
+        core_2.Directive({ selector: '[dnd-sortable-container]' }), 
+        __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef, dnd_service_1.DragDropSortableService])
     ], SortableContainer);
@@ -101,4 +104,4 @@ return SortableContainer;
     __extends(SortableComponent, _super);
-    function SortableComponent(elemRef, _dragDropService, _config, _sortableContainer, _sortableDataService) {
-        _super.call(this, elemRef, _dragDropService, _config);
+    function SortableComponent(elemRef, dragDropService, config, _sortableContainer, _sortableDataService, cdr) {
+        _super.call(this, elemRef, dragDropService, config, cdr);
         this._sortableContainer = _sortableContainer;
@@ -110,7 +113,7 @@ this._sortableDataService = _sortableDataService;
          */
-        this.onDragSuccessCallback = new core_1.EventEmitter();
-        this.onDragStartCallback = new core_1.EventEmitter();
-        this.onDragOverCallback = new core_1.EventEmitter();
-        this.onDragEndCallback = new core_1.EventEmitter();
-        this.onDropSuccessCallback = new core_1.EventEmitter();
+        this.onDragSuccessCallback = new core_2.EventEmitter();
+        this.onDragStartCallback = new core_2.EventEmitter();
+        this.onDragOverCallback = new core_2.EventEmitter();
+        this.onDragEndCallback = new core_2.EventEmitter();
+        this.onDropSuccessCallback = new core_2.EventEmitter();
         this.dropZones = this._sortableContainer.dropZones;
@@ -187,9 +190,11 @@ this.dragEnabled = true;
         }
+        // Refresh changes in properties of container component
+        this._sortableContainer.detectChanges();
     };
     __decorate([
-        core_1.Input('sortableIndex'), 
+        core_2.Input('sortableIndex'), 
         __metadata('design:type', Number)
     ], SortableComponent.prototype, "index", void 0);
     __decorate([
-        core_1.Input("dragEnabled"), 
+        core_2.Input("dragEnabled"), 
         __metadata('design:type', Boolean), 
@@ -199,3 +204,3 @@ __metadata('design:paramtypes', [Boolean])
     __decorate([
-        core_1.Input("dropEnabled"), 
+        core_2.Input("dropEnabled"), 
         __metadata('design:type', Boolean), 
@@ -205,28 +210,28 @@ __metadata('design:paramtypes', [Boolean])
     __decorate([
-        core_1.Input(), 
+        core_2.Input(), 
         __metadata('design:type', Object)
     ], SortableComponent.prototype, "dragData", void 0);
     __decorate([
-        core_1.Output("onDragSuccess"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDragSuccess"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], SortableComponent.prototype, "onDragSuccessCallback", void 0);
     __decorate([
-        core_1.Output("onDragStart"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDragStart"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], SortableComponent.prototype, "onDragStartCallback", void 0);
     __decorate([
-        core_1.Output("onDragOver"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDragOver"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], SortableComponent.prototype, "onDragOverCallback", void 0);
     __decorate([
-        core_1.Output("onDragEnd"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDragEnd"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], SortableComponent.prototype, "onDragEndCallback", void 0);
     __decorate([
-        core_1.Output("onDropSuccess"), 
-        __metadata('design:type', core_1.EventEmitter)
+        core_2.Output("onDropSuccess"), 
+        __metadata('design:type', core_2.EventEmitter)
     ], SortableComponent.prototype, "onDropSuccessCallback", void 0);
     SortableComponent = __decorate([
-        core_1.Directive({ selector: '[dnd-sortable]' }), 
-        __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, SortableContainer, dnd_service_1.DragDropSortableService])
+        core_2.Directive({ selector: '[dnd-sortable]' }), 
+        __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, SortableContainer, dnd_service_1.DragDropSortableService, core_1.ChangeDetectorRef])
     ], SortableComponent);
@@ -233,0 +238,0 @@ return SortableComponent;

src/dnd.sortable.ts

@@ -5,3 +5,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
 
-import {Injectable} from 'angular2/core';
+import {Injectable, ChangeDetectorRef} from 'angular2/core';
 import {Directive, Input, Output, EventEmitter, ElementRef} from 'angular2/core';
@@ -38,4 +38,6 @@
 
-    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config:DragDropConfig, private _sortableDataService: DragDropSortableService) {
-        super(elemRef, _dragDropService, _config);
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, cdr:ChangeDetectorRef,
+        private _sortableDataService: DragDropSortableService) {
+            
+        super(elemRef, dragDropService, config, cdr);
         this.dragEnabled = false;
@@ -57,2 +59,4 @@ }
         }
+        // Refresh changes in properties of container component
+        this.detectChanges();
     }
@@ -90,4 +94,8 @@ }
 
-    constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config:DragDropConfig, private _sortableContainer: SortableContainer, private _sortableDataService: DragDropSortableService) {
-        super(elemRef, _dragDropService, _config);
+    constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, 
+        private _sortableContainer: SortableContainer, 
+        private _sortableDataService: DragDropSortableService, 
+        cdr:ChangeDetectorRef) {
+            
+        super(elemRef, dragDropService, config, cdr);
 
@@ -156,3 +164,5 @@ this.dropZones = this._sortableContainer.dropZones;
         }
+        // Refresh changes in properties of container component
+        this._sortableContainer.detectChanges();
     }
 }

No alert changes

Improved metrics

Total package byte prevSize

178515

increased by2.81%

Lines of code

2307

increased by3.64%

No dependency changes