diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 7e76608..664ed2a 100644 --- a/src/Draggable/Draggable.js +++ b/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); diff --git a/src/Draggable/MirrorEvent/MirrorEvent.js b/src/Draggable/MirrorEvent/MirrorEvent.js index efc313d..818fbb4 100644 --- a/src/Draggable/MirrorEvent/MirrorEvent.js +++ b/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; + } } diff --git a/src/Draggable/MirrorEvent/README.md b/src/Draggable/MirrorEvent/README.md index 69b766d..4ee5748 100644 --- a/src/Draggable/MirrorEvent/README.md +++ b/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. diff --git a/src/Draggable/MirrorEvent/index.js b/src/Draggable/MirrorEvent/index.js index 5bf7b84..4bd460e 100644 --- a/src/Draggable/MirrorEvent/index.js +++ b/src/Draggable/MirrorEvent/index.js @@ -1,4 +1,5 @@ export { + MirrorCreateEvent, MirrorCreatedEvent, MirrorAttachedEvent, MirrorMoveEvent,