Added cancelable MirrorCreateEvent

src/Draggable/Draggable.js

@@ -24,6 +24,7 @@ import {
 } from './DragEvent';
 
 import {
+  MirrorCreateEvent,
   MirrorCreatedEvent,
   MirrorAttachedEvent,
   MirrorMoveEvent,
@@ -347,7 +348,16 @@ export default class Draggable {
 
     this.source = this.originalSource.cloneNode(true);
 
-    if (!isDragEvent(originalEvent)) {
+    const mirrorCreateEvent = new MirrorCreateEvent({
+      source: this.source,
+      originalSource: this.originalSource,
+      sourceContainer: container,
+      sensorEvent,
+    });
+
+    this.trigger(mirrorCreateEvent);
+
+    if (!isDragEvent(originalEvent) && !mirrorCreateEvent.canceled()) {
       const appendableContainer = this[getAppendableContainer]({source: this.originalSource});
       this.mirror = this.source.cloneNode(true);
 

src/Draggable/MirrorEvent/MirrorEvent.js

@@ -28,16 +28,6 @@ export class MirrorEvent extends AbstractEvent {
     return this.data.originalSource;
   }
 
-  /**
-   * Draggables mirror element
-   * @property mirror
-   * @type {HTMLElement}
-   * @readonly
-   */
-  get mirror() {
-    return this.data.mirror;
-  }
-
   /**
    * Draggables source container element
    * @property sourceContainer
@@ -81,6 +71,16 @@ export class MirrorEvent extends AbstractEvent {
   }
 }
 
+/**
+ * Mirror create event
+ * @class MirrorCreateEvent
+ * @module MirrorCreateEvent
+ * @extends MirrorEvent
+ */
+export class MirrorCreateEvent extends MirrorEvent {
+  static type = 'mirror:create';
+}
+
 /**
  * Mirror created event
  * @class MirrorCreatedEvent
@@ -89,6 +89,16 @@ export class MirrorEvent extends AbstractEvent {
  */
 export class MirrorCreatedEvent extends MirrorEvent {
   static type = 'mirror:created';
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get mirror() {
+    return this.data.mirror;
+  }
 }
 
 /**
@@ -99,6 +109,16 @@ export class MirrorCreatedEvent extends MirrorEvent {
  */
 export class MirrorAttachedEvent extends MirrorEvent {
   static type = 'mirror:attached';
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get mirror() {
+    return this.data.mirror;
+  }
 }
 
 /**
@@ -110,6 +130,16 @@ export class MirrorAttachedEvent extends MirrorEvent {
 export class MirrorMoveEvent extends MirrorEvent {
   static type = 'mirror:move';
   static cancelable = true;
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get mirror() {
+    return this.data.mirror;
+  }
 }
 
 /**
@@ -121,4 +151,14 @@ export class MirrorMoveEvent extends MirrorEvent {
 export class MirrorDestroyEvent extends MirrorEvent {
   static type = 'mirror:destroy';
   static cancelable = true;
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get mirror() {
+    return this.data.mirror;
+  }
 }

src/Draggable/MirrorEvent/README.md

@@ -19,10 +19,6 @@ element, which can be moved around in the DOM.
 Read-only property for the original source element that was picked up. This element never
 moves in the DOM and gets hidden on `drag:start`.
 
-**`mirrorEvent.mirror: HTMLElement`**  
-Read-only property for the mirror element, which is also a copy of the `originalSource` element.
-The mirror follows your mouse/touch movements.
-
 **`mirrorEvent.sourceContainer: HTMLElement`**  
 Read-only property for the source elements container. This would be one of the containers that
 was passed into Draggable.
@@ -36,6 +32,18 @@ Read-only property for the original event  that triggered the sensor event.
 **`mirrorEvent.hasMirror(): Boolean`**  
 Checks if a mirror has been created. The mirror does not get created for `DragSensor` or `KeyboardSensor` events
 
+## MirrorCreateEvent
+
+`MirrorCreateEvent` gets triggered by `Draggable` before the mirror element gets created.
+
+| | |
+| --------------------- | ---------------------------------------------------------- |
+| **Specification**     | `MirrorEvent`                                              |
+| **Interface**         | `MirrorCreateEvent`                                       |
+| **Cancelable**        | true                                                       |
+| **Cancel action**     | Cancels the creation of the mirror element                 |
+| **type**              | `mirror:create`                                           |
+
 ## MirrorCreatedEvent
 
 `MirrorCreatedEvent` gets triggered by `Draggable` when the mirror element has
@@ -49,6 +57,12 @@ been created.
 | **Cancel action**     | -                                                          |
 | **type**              | `mirror:created`                                           |
 
+### API
+
+**`mirrorEvent.mirror: HTMLElement`**  
+Read-only property for the mirror element, which is also a copy of the `originalSource` element.
+The mirror follows your mouse/touch movements.
+
 ## MirrorAttachedEvent
 
 `MirrorAttachedEvent` gets triggered when the mirror has been appended to the DOM.
@@ -61,6 +75,12 @@ been created.
 | **Cancel action**     | -                                                          |
 | **type**              | `mirror:attached`                                          |
 
+### API
+
+**`mirrorEvent.mirror: HTMLElement`**  
+Read-only property for the mirror element, which is also a copy of the `originalSource` element.
+The mirror follows your mouse/touch movements.
+
 ## MirrorMoveEvent
 
 `MirrorMoveEvent` gets triggered when moving the mirror around.
@@ -73,6 +93,12 @@ been created.
 | **Cancel action**     | Stops mirror movement                                      |
 | **type**              | `drag:over`                                                |
 
+### API
+
+**`mirrorEvent.mirror: HTMLElement`**  
+Read-only property for the mirror element, which is also a copy of the `originalSource` element.
+The mirror follows your mouse/touch movements.
+
 ## MirrorDestroyEvent
 
 `MirrorDestroyEvent` gets triggered before the mirror gets removed from the DOM.
@@ -84,3 +110,9 @@ been created.
 | **Cancelable**        | true                                                       |
 | **Cancel action**     | Cancels the removal of the mirror from the DOM             |
 | **type**              | `mirror:destroy`                                           |
+
+### API
+
+**`mirrorEvent.mirror: HTMLElement`**  
+Read-only property for the mirror element, which is also a copy of the `originalSource` element.
+The mirror follows your mouse/touch movements.

src/Draggable/MirrorEvent/index.js

@@ -1,4 +1,5 @@
 export {
+  MirrorCreateEvent,
   MirrorCreatedEvent,
   MirrorAttachedEvent,
   MirrorMoveEvent,