feat: add experimental drag-drop package (#11864)

Author: crisbeto

.github/CODEOWNERS

@@ -87,6 +87,7 @@
 /src/cdk-experimental/**                           @jelbourn
 /src/cdk-experimental/dialog/**                    @jelbourn @josephperrott @crisbeto
 /src/cdk-experimental/scrolling/**                 @mmalerba
+/src/cdk-experimental/drag-drop/**                 @crisbeto
 
 # Docs examples & guides
 /guides/**                                         @amcdnl @jelbourn
@@ -110,6 +111,7 @@
 /src/demo-app/demo-app/**                          @jelbourn
 /src/demo-app/dialog/**                            @jelbourn @crisbeto
 /src/demo-app/drawer/**                            @mmalerba
+/src/demo-app/drag-drop/**                         @crisbeto
 /src/demo-app/example/**                           @andrewseguin
 /src/demo-app/examples-page/**                     @andrewseguin
 /src/demo-app/expansion/**                         @josephperrott

packages.bzl

@@ -24,6 +24,7 @@ CDK_TARGETS = ["//src/cdk"] + ["//src/cdk/%s" % p for p in CDK_PACKAGES]
 CDK_EXPERIMENTAL_PACKAGES = [
   "dialog",
   "scrolling",
+  "drag-drop",
 ]
 
 CDK_EXPERIMENTAL_TARGETS = ["//src/cdk-experimental"] + [

src/cdk-experimental/drag-drop/BUILD.bazel

@@ -0,0 +1,51 @@
+package(default_visibility=["//visibility:public"])
+load("@angular//:index.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library", "ts_web_test")
+load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")
+
+
+ng_module(
+  name = "drag-drop",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
+  module_name = "@angular/cdk-experimental/drag-drop",
+  assets = [":drop.css"],
+  deps = [
+    "@rxjs",
+    "//src/cdk/platform",
+  ],
+  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
+)
+
+
+ts_library(
+  name = "drag_and_drop_test_sources",
+  testonly = 1,
+  srcs = glob(["**/*.spec.ts"]),
+  deps = [
+    ":drag-drop",
+    "//src/cdk/testing",
+  ],
+  tsconfig = "//src/cdk-experimental:tsconfig-build.json",
+)
+
+sass_binary(
+  name = "drop_scss",
+  src = "drop.scss",
+)
+
+ts_web_test(
+  name = "unit_tests",
+  bootstrap = [
+    "//:web_test_bootstrap_scripts",
+  ],
+  tags = ["manual"],
+
+  # Do not sort
+  deps = [
+    "//:tslib_bundle",
+    "//:angular_bundles",
+    "//:angular_test_bundles",
+    "//test:angular_test_init",
+    ":drag_and_drop_test_sources",
+  ],
+)

src/cdk-experimental/drag-drop/drag-drop-module.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {CdkDrop} from './drop';
+import {CdkDrag} from './drag';
+import {CdkDragHandle} from './drag-handle';
+import {CdkDragPreview} from './drag-preview';
+import {CdkDragPlaceholder} from './drag-placeholder';
+
+@NgModule({
+  declarations: [
+    CdkDrop,
+    CdkDrag,
+    CdkDragHandle,
+    CdkDragPreview,
+    CdkDragPlaceholder,
+  ],
+  exports: [
+    CdkDrop,
+    CdkDrag,
+    CdkDragHandle,
+    CdkDragPreview,
+    CdkDragPlaceholder,
+  ],
+})
+export class DragDropModule {}

src/cdk-experimental/drag-drop/drag-drop.md

@@ -0,0 +1 @@
+# TODO

src/cdk-experimental/drag-drop/drag-events.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CdkDrag} from './drag';
+import {CdkDropContainer} from './drop-container';
+
+/** Event emitted when the user starts dragging a draggable. */
+export interface CdkDragStart {
+  /** Draggable that emitted the event. */
+  source: CdkDrag;
+}
+
+
+/** Event emitted when the user stops dragging a draggable. */
+export interface CdkDragEnd {
+  /** Draggable that emitted the event. */
+  source: CdkDrag;
+}
+
+/** Event emitted when the user moves an item into a new drop container. */
+export interface CdkDragEnter<T> {
+  /** Container into which the user has moved the item. */
+  container: CdkDropContainer<T>;
+  /** Item that was removed from the container. */
+  item: CdkDrag;
+}
+
+/**
+ * Event emitted when the user removes an item from a
+ * drop container by moving it into another one.
+ */
+export interface CdkDragExit<T> {
+  /** Container from which the user has a removed an item. */
+  container: CdkDropContainer<T>;
+  /** Item that was removed from the container. */
+  item: CdkDrag;
+}
+
+
+/** Event emitted when the user drops a draggable item inside a drop container. */
+export interface CdkDragDrop<T, O = T> {
+  /** Index of the item when it was picked up. */
+  previousIndex: number;
+  /** Current index of the item. */
+  currentIndex: number;
+  /** Item that is being dropped. */
+  item: CdkDrag;
+  /** Container in which the item was dropped. */
+  container: CdkDropContainer<T>;
+  /** Container from which the item was picked up. Can be the same as the `container`. */
+  previousContainer: CdkDropContainer<O>;
+}

src/cdk-experimental/drag-drop/drag-handle.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, ElementRef} from '@angular/core';
+
+/** Handle that can be used to drag and CdkDrag instance. */
+@Directive({
+  selector: '[cdkDragHandle]',
+  host: {
+    'class': 'cdk-drag-handle'
+  }
+})
+export class CdkDragHandle {
+  constructor(public element: ElementRef<HTMLElement>) {}
+}

src/cdk-experimental/drag-drop/drag-placeholder.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, TemplateRef, Input} from '@angular/core';
+
+/**
+ * Element that will be used as a template for the placeholder of a CdkDrag when
+ * it is being dragged. The placeholder is displayed in place of the element being dragged.
+ */
+@Directive({
+  selector: 'ng-template[cdkDragPlaceholder]'
+})
+export class CdkDragPlaceholder<T = any> {
+  /** Context data to be added to the placeholder template instance. */
+  @Input() data: T;
+  constructor(public templateRef: TemplateRef<T>) {}
+}

src/cdk-experimental/drag-drop/drag-preview.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, TemplateRef, Input} from '@angular/core';
+
+/**
+ * Element that will be used as a template for the preview
+ * of a CdkDrag when it is being dragged.
+ */
+@Directive({
+  selector: 'ng-template[cdkDragPreview]'
+})
+export class CdkDragPreview<T = any> {
+  /** Context data to be added to the preview template instance. */
+  @Input() data: T;
+  constructor(public templateRef: TemplateRef<T>) {}
+}

src/cdk-experimental/drag-drop/drag-utils.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/**
+ * Moves an item one index in an array to another.
+ * @param array Array in which to move the item.
+ * @param fromIndex Starting index of the item.
+ * @param toIndex Index to which the item should be moved.
+ */
+export function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void {
+  if (fromIndex === toIndex) {
+    return;
+  }
+
+  const target = array[fromIndex];
+  const delta = toIndex < fromIndex ? -1 : 1;
+
+  for (let i = fromIndex; i !== toIndex; i += delta) {
+    array[i] = array[i + delta];
+  }
+
+  array[toIndex] = target;
+}
+
+
+/**
+ * Moves an item from one array to another.
+ * @param currentArray Array from which to transfer the item.
+ * @param targetArray Array into which to put the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ */
+export function transferArrayItem<T = any>(currentArray: T[],
+                                           targetArray: T[],
+                                           currentIndex: number,
+                                           targetIndex: number): void {
+  targetArray.splice(targetIndex, 0, currentArray.splice(currentIndex, 1)[0]);
+}