Example: Reordering (#3)

Example: Reordering

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 1.0.2+1
+- New example: Reordering
+
 ## 1.0.2
 - Live examples
 

pubspec.yaml

@@ -1,5 +1,5 @@
 name: drag_drop_angular
-version: 1.0.2
+version: 1.0.2+1
 description: 'AngularDart providers for HTML5 Drag Drop library'
 homepage: http://www.github.com/wrike/drag-drop-angular.dart
 publish_to: http://pub.dartlang.org

web/examples/drag_drop/drag_drop_22/drag_drop_22.dart

@@ -0,0 +1,56 @@
+import 'package:angular2/angular2.dart';
+
+import '../../common.dart';
+
+@Component(
+  selector: 'drag-drop-example-22',
+  templateUrl: 'drag_drop_22.html',
+  styleUrls: const ['drag_drop_22.css'],
+  directives: const [
+    CORE_DIRECTIVES,
+    DRAG_DROP_DIRECTIVES,
+    BasketComponent,
+    FruitComponent
+  ]
+)
+class DragDropExample22Component {
+
+  final FruitFactory fruits;
+  final ExampleEventsHandler handler;
+  final Basket<FruitModel> basket = new Basket<FruitModel>();
+
+
+  DragOptions dragOptions = new DragOptions(
+    selector: 'fruit-component'
+  );
+
+  DropOptions dropOptions = new DropOptions(
+    selector: '.fruit-wrapper',
+    canEnter: (DragSource source) => source.model is FruitModel
+  );
+
+  DragDropExample22Component(this.fruits, this.handler) {
+    basket.addAll(fruits.getFruits(7));
+  }
+
+  MovementDirection _movementDirection;
+  bool get movingLeft => _movementDirection?.x == MovementDirectionType.negative;
+  bool get movingRight => _movementDirection?.x == MovementDirectionType.positive;
+
+  void onDragOver(DragOverEvent event) {
+    _movementDirection = event.movement.direction;
+  }
+
+  void onDrop(DropEvent event) {
+    FruitModel fruit = event.source.model;
+    FruitModel anchorFruit = event.target.model;
+
+    basket.items.remove(fruit);
+    int pos = basket.items.indexOf(anchorFruit);
+    if (movingRight) {
+      pos++;
+    }
+    basket.items.insert(pos, fruit);
+  }
+
+}

web/examples/drag_drop/drag_drop_22/drag_drop_22.html

@@ -0,0 +1,21 @@
+<h2>Drag Drop Example 22: Reorder items</h2>
+<p>Due to the declarative approach of Angular,
+  we must do reordering the same way by configuring drop-target for each place where the item can be dropped.</p>
+
+<basket-component [basket]="basket"
+                  [drag-options]="dragOptions"
+                  [drop-options]="dropOptions"
+                  (onDragOver)="onDragOver($event)"
+                  (onDrop)="onDrop($event)"
+                  [class.shift-left]="movingLeft"
+                  [class.shift-right]="movingRight"
+>
+  <div *ngFor="let fruit of basket.items"
+       class="fruit-wrapper"
+       [drag-drop-model]="fruit"
+  >
+    <fruit-component [model]="fruit"
+                     [drag-drop-model]="fruit"
+    ></fruit-component>
+  </div>
+</basket-component>

web/examples/drag_drop/drag_drop_22/drag_drop_22.less

@@ -0,0 +1,23 @@
+
+:host {
+  display: block;
+
+  .fruit-wrapper {
+    padding-right: 6px;
+    display: inline-block;
+    transition: padding 0.1s;
+  }
+
+  basket-component.drag-drop-container-over.shift-left {
+    .fruit-wrapper.drop-target-over-valid {
+      padding-left: 40px;
+    }
+  }
+
+  basket-component.drag-drop-container-over.shift-right {
+    .fruit-wrapper.drop-target-over-valid {
+      padding-right: 40px;
+    }
+  }
+
+}

web/examples/examples.dart

@@ -1,3 +1,4 @@
+import 'drag_drop/drag_drop_22/drag_drop_22.dart';
 import 'package:angular2/angular2.dart';
 
 import 'common.dart';
@@ -54,7 +55,8 @@ import 'drag_drop/drag_drop_21/drag_drop_21.dart';
     DragDropExample18Component,
     DragDropExample19Component,
     DragDropExample20Component,
-    DragDropExample21Component
+    DragDropExample21Component,
+    DragDropExample22Component
   ]
 )
 class ExamplesComponent {

web/examples/examples.html

@@ -19,3 +19,4 @@
 <div class="example"><drag-drop-example-19></drag-drop-example-19></div>
 <div class="example"><drag-drop-example-20></drag-drop-example-20></div>
 <div class="example"><drag-drop-example-21></drag-drop-example-21></div>
+<div class="example"><drag-drop-example-22></drag-drop-example-22></div>