ng2-dnd - npm Package Compare versions

Comparing version 2.2.1 to 2.2.2

package.json

 {
   "name": "ng2-dnd",
   "description": "Angular 2 Drag-and-Drop without dependencies",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "scripts": {
@@ -81,2 +81,2 @@ "test": "karma start",
   }
-}
+}

README.md

@@ -86,11 +86,13 @@ # Angular 2 Drag-and-Drop [![npm version](https://badge.fury.io/js/ng2-dnd.svg)](https://badge.fury.io/js/ng2-dnd) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-dnd.svg?style=flat-square)](https://www.npmjs.com/package/ng2-dnd)
     template: `
-<h4>Simple Drag-and-Drop</h4>
-<div class="row">
-    <div class="col-sm-3">
-        <div class="panel panel-success">
-            <div class="panel-heading">Available to drag</div>
-            <div class="panel-body">
-                <div class="panel panel-default" dnd-draggable [dragEnabled]="true">
-                    <div class="panel-body">
-                        <div>Drag Me</div>
+<div class="container">
+    <h4>Simple Drag-and-Drop</h4>
+    <div class="row">
+        <div class="col-sm-3">
+            <div class="panel panel-success">
+                <div class="panel-heading">Available to drag</div>
+                <div class="panel-body">
+                    <div class="panel panel-default" dnd-draggable [dragEnabled]="true">
+                        <div class="panel-body">
+                            <div>Drag Me</div>
+                        </div>
                     </div>
@@ -100,17 +102,11 @@ </div>
         </div>
-    </div>
-    <div class="col-sm-3">
-        <div dnd-droppable class="panel panel-info">
-            <div class="panel-heading">Place to drop</div>
-            <div class="panel-body">
+        <div class="col-sm-3">
+            <div dnd-droppable class="panel panel-info" (onDropSuccess)="simpleDrop=$event">
+                <div class="panel-heading">Place to drop</div>
+                <div class="panel-body">
+                    <div *ngIf="simpleDrop">Item was dropped here</div>
+                </div>
             </div>
         </div>
     </div>
-    <div class="col-sm-3">
-        <div dnd-droppable class="panel panel-warning">
-            <div class="panel-heading">Restricted to drop</div>
-            <div class="panel-body">
-            </div>
-        </div>
-    </div>
 </div>
@@ -131,26 +127,26 @@ `
     template: `
-<h4>Restricting Drag-and-Drop with zones</h4>
-<div class="row">
-    <div class="col-sm-3">
-        <div class="panel panel-primary">
-            <div class="panel-heading">Available to drag</div>
-            <div class="panel-body">
-                <div class="panel panel-default" dnd-draggable [dragEnabled]="true"
-                    [dropZones]="['zone1']">
-                    <div class="panel-body">
-                        <div>Drag Me</div>
-                        <div>Zone 1 only</div>
+<div class="container">
+    <h4>Restricted Drag-and-Drop with zones</h4>
+    <div class="row">
+        <div class="col-sm-3">
+            <div class="panel panel-primary">
+                <div class="panel-heading">Available to drag</div>
+                <div class="panel-body">
+                    <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dropZones]="['zone1']">
+                        <div class="panel-body">
+                            <div>Drag Me</div>
+                            <div>Zone 1 only</div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="panel panel-success">
-            <div class="panel-heading">Available to drag</div>
-            <div class="panel-body">
-                <div class="panel panel-default" dnd-draggable [dragEnabled]="true"
-                    [dropZones]="['zone1', 'zone2']">
-                    <div class="panel-body">
-                        <div>Drag Me</div>
-                        <div>Zone 1 & 2</div>
+            <div class="panel panel-success">
+                <div class="panel-heading">Available to drag</div>
+                <div class="panel-body">
+                    <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dropZones]="['zone1', 'zone2']">
+                        <div class="panel-body">
+                            <div>Drag Me</div>
+                            <div>Zone 1 & 2</div>
+                        </div>
                     </div>
@@ -160,14 +156,16 @@ </div>
         </div>
-    </div>
-    <div class="col-sm-3">
-        <div dnd-droppable class="panel panel-info" [dropZones]="['zone1']">
-            <div class="panel-heading">Zone 1</div>
-            <div class="panel-body">
+        <div class="col-sm-3">
+            <div dnd-droppable class="panel panel-info" [dropZones]="['zone1']" (onDropSuccess)="restrictedDrop1=$event">
+                <div class="panel-heading">Zone 1</div>
+                <div class="panel-body">
+                    <div *ngIf="restrictedDrop1">Item was dropped here</div>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="col-sm-3">
-        <div dnd-droppable class="panel panel-warning" [dropZones]="['zone2']">
-            <div class="panel-heading">Zone 2</div>
-            <div class="panel-body">
+        <div class="col-sm-3">
+            <div dnd-droppable class="panel panel-warning" [dropZones]="['zone2']" (onDropSuccess)="restrictedDrop2=$event">
+                <div class="panel-heading">Zone 2</div>
+                <div class="panel-body">
+                    <div *ngIf="restrictedDrop2">Item was dropped here</div>
+                </div>
             </div>
@@ -191,13 +189,14 @@ </div>
     template: `
-<h4>Transfer custom data in Drag-and-Drop</h4>
-<div class="row">
-    <div class="col-sm-3">
-        <div class="panel panel-success">
-            <div class="panel-heading">Available to drag</div>
-            <div class="panel-body">
-                <div class="panel panel-default" dnd-draggable [dragEnabled]="true"
-                    [dragData]="transferData">
-                    <div class="panel-body">
-                        <div>Drag Me</div>
-                        <div>{{transferData | json}}</div>
+<div class="container">
+    <h4>Transfer custom data in Drag-and-Drop</h4>
+    <div class="row">
+        <div class="col-sm-3">
+            <div class="panel panel-success">
+                <div class="panel-heading">Available to drag</div>
+                <div class="panel-body">
+                    <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragData]="transferData">
+                        <div class="panel-body">
+                            <div>Drag Me</div>
+                            <div>{{transferData | json}}</div>
+                        </div>
                     </div>
@@ -207,13 +206,12 @@ </div>
         </div>
-    </div>
-    <div class="col-sm-3">
-        <div dnd-droppable class="panel panel-info"
-            (onDropSuccess)="transferDataSuccess($event)">
-            <div class="panel-heading">Place to drop (Items:{{receivedData.length}})</div>
-            <div class="panel-body">
-                <div [hidden]="!receivedData.length > 0"
-                    *ngFor="let data of receivedData">{{data | json}}</div>
+        <div class="col-sm-3">
+            <div dnd-droppable class="panel panel-info" (onDropSuccess)="transferDataSuccess($event)">
+                <div class="panel-heading">Place to drop (Items:{{receivedData.length}})</div>
+                <div class="panel-body">
+                    <div [hidden]="!receivedData.length > 0" *ngFor="let data of receivedData">{{data | json}}</div>
+                </div>
             </div>
         </div>
     </div>
+
 </div>
@@ -220,0 +218,0 @@ `

src/sortable.component.js

@@ -36,3 +36,3 @@ // Copyright (C) 2016 Sergey Akopkokhyants
             //
-            this.dropEnabled = this._sortableData.length === 0;
+            this.dropEnabled = !!this._sortableData;
             // console.log("collection is changed, drop enabled: " + this.dropEnabled);
@@ -64,5 +64,2 @@ },
                 this._sortableData.unshift(item);
-                if (this.dropEnabled) {
-                    this.dropEnabled = false;
-                }
                 this._sortableDataService.sortableContainer = this;
@@ -69,0 +66,0 @@ this._sortableDataService.index = 0;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

387546

increased by52.96%

Number of package files

41

increased by2.5%

Worsened metrics

Lines of code

2713

decreased by-0.22%

Number of lines in readme file

503

decreased by-0.4%

No dependency changes