draggable-rails 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1a9c0fb9461722b2c3faf25b8630e900c2f22d8e
-  data.tar.gz: a2c1018ccfc626a6d6757401c9bc70007352ff55
+  metadata.gz: 8ca6434b4515d382cf869565d05835704455c6d7
+  data.tar.gz: 76116c2095b2282b6f29b0ad987466c72582da6b
 SHA512:
-  metadata.gz: 893c37beeafa5c194fa862c08dd989720f23576349980d86cda78d38b80bfec2fab6139b0f9e7d3391f2c33d67f13f8a2b50f536977a2bfd9e01301f81ac1d03
-  data.tar.gz: b281790116a02f5c394ee8a7aac79c3dd9784468b31696c8f3d3b51813e842fb50d759b93b1f5ced3dc4d7f739b4ad7cebe5696a3bf4171a4c5f16c994280eb3
+  metadata.gz: 6d7800084b1fa71f466f93a8cece89c9c52c84dea9b5d8f4f81cf8bc1d7ba270f9cc72915c2b82a6a437d49f9130ded5191bf9199883d840610ba8a827e5ecc1
+  data.tar.gz: 14482cd176bd243dd63cff18650ae4e88ad62f377bc8ad63b9577cf44ac893c70a06b26e7bb26efbc0981c2325227d7bb7e6bb23ad01023a6c7fa12fd7fa219e

data/lib/draggable/rails/version.rb

@@ -1,5 +1,5 @@
 module Draggable
   module Rails
-    VERSION = "0.1.0"
+    VERSION = "0.1.1"
   end
 end

data/vendor/assets/javascripts/behaviour/collidable.js

@@ -0,0 +1,99 @@
+import {closest} from './../utils';
+
+import {
+  CollidableInEvent,
+  CollidableOutEvent,
+} from './../events/collidable-event';
+
+export default class Collidable {
+  constructor(draggable) {
+    this.draggable = draggable;
+
+    this._onDragMove = this._onDragMove.bind(this);
+    this._onDragStop = this._onDragStop.bind(this);
+    this._onRequestAnimationFrame = this._onRequestAnimationFrame.bind(this);
+  }
+
+  attach() {
+    this.draggable.on('drag:move', this._onDragMove);
+    this.draggable.on('drag:stop', this._onDragStop);
+  }
+
+  detach() {
+    this.draggable.off('drag:move', this._onDragMove);
+    this.draggable.off('drag:stop', this._onDragStop);
+  }
+
+  _onDragMove(event) {
+    const target = event.sensorEvent.target;
+
+    this.currentAnimationFrame = requestAnimationFrame(this._onRequestAnimationFrame(target));
+
+    if (this.currentlyCollidingElement) {
+      event.cancel();
+    }
+
+    const collidableInEvent = new CollidableInEvent({
+      dragEvent: event,
+      collidingElement: this.currentlyCollidingElement,
+    });
+
+    const collidableOutEvent = new CollidableOutEvent({
+      dragEvent: event,
+      collidingElement: this.lastCollidingElement,
+    });
+
+    const enteringCollidable = Boolean(this.currentlyCollidingElement && this.lastCollidingElement !== this.currentlyCollidingElement);
+    const leavingCollidable = Boolean(!this.currentlyCollidingElement && this.lastCollidingElement);
+
+    if (enteringCollidable) {
+      if (this.lastCollidingElement) {
+        this.draggable.triggerEvent(collidableOutEvent);
+      }
+
+      this.draggable.triggerEvent(collidableInEvent);
+    } else if (leavingCollidable) {
+      this.draggable.triggerEvent(collidableOutEvent);
+    }
+
+    this.lastCollidingElement = this.currentlyCollidingElement;
+  }
+
+  _onDragStop(event) {
+    const lastCollidingElement = this.currentlyCollidingElement || this.lastCollidingElement;
+    const collidableOutEvent = new CollidableOutEvent({
+      dragEvent: event,
+      collidingElement: lastCollidingElement,
+    });
+
+    if (lastCollidingElement) {
+      this.draggable.triggerEvent(collidableOutEvent);
+    }
+
+    this.lastCollidingElement = null;
+    this.currentlyCollidingElement = null;
+  }
+
+  _onRequestAnimationFrame(target) {
+    return () => {
+      const collidables = this._getCollidables();
+      this.currentlyCollidingElement = closest(target, (element) => collidables.includes(element));
+    };
+  }
+
+  _getCollidables() {
+    const collidables = this.draggable.options.collidables;
+
+    if (typeof collidables === 'string') {
+      return Array.prototype.slice.call(document.querySelectorAll(collidables));
+    } else if (collidables instanceof NodeList || collidables instanceof Array) {
+      return Array.prototype.slice.call(collidables);
+    } else if (collidables instanceof HTMLElement) {
+      return [collidables];
+    } else if (typeof collidables === 'function') {
+      return collidables();
+    } else {
+      return [];
+    }
+  }
+}

data/vendor/assets/javascripts/behaviour/snappable.js

@@ -0,0 +1,107 @@
+import {
+  SnapInEvent,
+  SnapOutEvent,
+} from './../events/snappable-event';
+
+export default class Snappable {
+  constructor(draggable) {
+    this.draggable = draggable;
+
+    this._onDragStart = this._onDragStart.bind(this);
+    this._onDragStop = this._onDragStop.bind(this);
+    this._onDragOver = this._onDragOver.bind(this);
+    this._onDragOut = this._onDragOut.bind(this);
+  }
+
+  attach() {
+    this.draggable
+      .on('drag:start', this._onDragStart)
+      .on('drag:stop', this._onDragStop)
+      .on('drag:over', this._onDragOver)
+      .on('drag:out', this._onDragOut)
+      .on('droppable:over', this._onDragOver)
+      .on('droppable:out', this._onDragOut);
+  }
+
+  detach() {
+    this.draggable
+      .off('drag:start', this._onDragStart)
+      .off('drag:stop', this._onDragStop)
+      .off('drag:over', this._onDragOver)
+      .off('drag:out', this._onDragOut)
+      .off('droppable:over', this._onDragOver)
+      .off('droppable:out', this._onDragOut);
+  }
+
+  _onDragStart(event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    this.firstSource = event.source;
+  }
+
+  _onDragStop() {
+    this.firstSource = null;
+  }
+
+  _onDragOver(event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    const source = event.source || event.dragEvent.source;
+    const mirror = event.mirror || event.dragEvent.mirror;
+
+    if (source === this.firstSource) {
+      this.firstSource = null;
+      return;
+    }
+
+    const snapInEvent = new SnapInEvent({
+      dragEvent: event,
+    });
+
+    this.draggable.triggerEvent(snapInEvent);
+
+    if (snapInEvent.canceled()) {
+      return;
+    }
+
+    if (mirror) {
+      mirror.style.display = 'none';
+    }
+
+    source.classList.remove(this.draggable.getClassNameFor('source:dragging'));
+    source.classList.add(this.draggable.getClassNameFor('source:placed'));
+
+    setTimeout(() => {
+      source.classList.remove(this.draggable.getClassNameFor('source:placed'));
+    }, this.draggable.options.placedTimeout);
+  }
+
+  _onDragOut(event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    const mirror = event.mirror || event.dragEvent.mirror;
+    const source = event.source || event.dragEvent.source;
+
+    const snapOutEvent = new SnapOutEvent({
+      dragEvent: event,
+    });
+
+    this.draggable.triggerEvent(snapOutEvent);
+
+    if (snapOutEvent.canceled()) {
+      return;
+    }
+
+    if (mirror) {
+      mirror.style.display = '';
+    }
+
+    source.classList.add(this.draggable.getClassNameFor('source:dragging'));
+  }
+}

data/vendor/assets/javascripts/core/accessibility.js

@@ -0,0 +1,58 @@
+const ARIA_GRABBED = 'aria-grabbed';
+const ARIA_DROPEFFECT = 'aria-dropeffect';
+const TABINDEX = 'tabindex';
+
+export default class Accessibility {
+  constructor(draggable) {
+    this.draggable = draggable;
+
+    this._onInit = this._onInit.bind(this);
+    this._onDestroy = this._onDestroy.bind(this);
+  }
+
+  attach() {
+    this.draggable
+      .on('init', this._onInit)
+      .on('destroy', this._onDestroy)
+      .on('drag:start', _onDragStart)
+      .on('drag:stop', _onDragStop);
+  }
+
+  detach() {
+    this.draggable
+      .off('init', this._onInit)
+      .off('destroy', this._onDestroy)
+      .off('drag:start', _onDragStart)
+      .off('drag:stop', _onDragStop);
+  }
+
+  _onInit({containers}) {
+    for (const container of containers) {
+      container.setAttribute(ARIA_DROPEFFECT, this.draggable.options.type);
+
+      for (const element of container.querySelectorAll(this.draggable.options.draggable)) {
+        element.setAttribute(TABINDEX, 0);
+        element.setAttribute(ARIA_GRABBED, false);
+      }
+    }
+  }
+
+  _onDestroy({containers}) {
+    for (const container of containers) {
+      container.removeAttribute(ARIA_DROPEFFECT);
+
+      for (const element of container.querySelectorAll(this.draggable.options.draggable)) {
+        element.removeAttribute(TABINDEX, 0);
+        element.removeAttribute(ARIA_GRABBED, false);
+      }
+    }
+  }
+}
+
+function _onDragStart({source}) {
+  source.setAttribute(ARIA_GRABBED, true);
+}
+
+function _onDragStop({source}) {
+  source.setAttribute(ARIA_GRABBED, false);
+}

data/vendor/assets/javascripts/core/mirror.js

@@ -0,0 +1,129 @@
+export default class Mirror {
+  constructor(draggable) {
+    this.draggable = draggable;
+
+    this._onMirrorCreated = this._onMirrorCreated.bind(this);
+    this._onMirrorMove = this._onMirrorMove.bind(this);
+  }
+
+  attach() {
+    this.draggable
+      .on('mirror:created', this._onMirrorCreated)
+      .on('mirror:created', onMirrorCreated)
+      .on('mirror:move', this._onMirrorMove);
+  }
+
+  detach() {
+    this.draggable
+      .off('mirror:created', this._onMirrorCreated)
+      .off('mirror:created', onMirrorCreated)
+      .off('mirror:move', this._onMirrorMove);
+  }
+
+  _onMirrorCreated({mirror, source, sensorEvent}) {
+    const mirrorClass = this.draggable.getClassNameFor('mirror');
+
+    const setState = (data) => {
+      this.mirrorOffset = data.mirrorOffset;
+      return data;
+    };
+
+    Promise.resolve({mirror, source, sensorEvent, mirrorClass})
+      .then(computeMirrorDimensions)
+      .then(calculateMirrorOffset)
+      .then(addMirrorClasses)
+      .then(positionMirror())
+      .then(removeMirrorID)
+      .then(setState)
+      .catch();
+  }
+
+  _onMirrorMove({mirror, sensorEvent}) {
+    Promise.resolve({mirror, sensorEvent, mirrorOffset: this.mirrorOffset})
+      .then(positionMirror({raf: true}))
+      .catch();
+  }
+}
+
+function onMirrorCreated({mirror, source}) {
+  Promise.resolve({mirror, source})
+    .then(resetMirror)
+    .catch();
+}
+
+function resetMirror(data) {
+  return withPromise((resolve) => {
+    const {mirror, source} = data;
+
+    mirror.style.position = 'fixed';
+    mirror.style.pointerEvents = 'none';
+    mirror.style.top = 0;
+    mirror.style.left = 0;
+    mirror.style.width = `${source.offsetWidth}px`;
+    mirror.style.height = `${source.offsetHeight}px`;
+
+    resolve(data);
+  });
+}
+
+function computeMirrorDimensions(data) {
+  return withPromise((resolve) => {
+    const {source} = data;
+    const sourceRect = source.getBoundingClientRect();
+    resolve({...data, sourceRect});
+  });
+}
+
+function calculateMirrorOffset(data) {
+  return withPromise((resolve) => {
+    const {sensorEvent, sourceRect} = data;
+    const mirrorOffset = {top: sensorEvent.clientY - sourceRect.top, left: sensorEvent.clientX - sourceRect.left};
+    resolve({...data, mirrorOffset});
+  });
+}
+
+function addMirrorClasses(data) {
+  return withPromise((resolve) => {
+    const {mirror, mirrorClass} = data;
+    mirror.classList.add(mirrorClass);
+    resolve(data);
+  });
+}
+
+function removeMirrorID(data) {
+  return withPromise((resolve) => {
+    const {mirror} = data;
+    mirror.removeAttribute('id');
+    delete mirror.id;
+    resolve(data);
+  });
+}
+
+function positionMirror({withFrame = false} = {}) {
+  return (data) => {
+    return withPromise((resolve) => {
+      const {mirror, sensorEvent, mirrorOffset} = data;
+
+      if (mirrorOffset) {
+        const x = sensorEvent.clientX - mirrorOffset.left;
+        const y = sensorEvent.clientY - mirrorOffset.top;
+
+        mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+      }
+
+      resolve(data);
+    }, {frame: withFrame});
+  };
+}
+
+function withPromise(callback, {raf = false} = {}) {
+  return new Promise((resolve, reject) => {
+    if (raf) {
+      requestAnimationFrame(() => {
+        callback(resolve, reject);
+      });
+    } else {
+      callback(resolve, reject);
+    }
+  });
+}

data/vendor/assets/javascripts/draggable.js

@@ -0,0 +1,487 @@
+import {closest} from './utils';
+
+import Accessibility from './core/accessibility';
+import Mirror from './core/mirror';
+
+import Collidable from './behaviour/collidable';
+import Snappable from './behaviour/snappable';
+
+import DragSensor from './sensors/drag-sensor';
+import MouseSensor from './sensors/mouse-sensor';
+import TouchSensor from './sensors/touch-sensor';
+import ForceTouchSensor from './sensors/force-touch-sensor';
+
+import {
+  DraggableInitializedEvent,
+  DraggableDestroyEvent,
+} from './events/draggable-event';
+
+import {
+  DragStartEvent,
+  DragMoveEvent,
+  DragOutContainerEvent,
+  DragOutEvent,
+  DragOverContainerEvent,
+  DragOverEvent,
+  DragStopEvent,
+  DragPressureEvent,
+} from './events/drag-event';
+
+import {
+  MirrorCreatedEvent,
+  MirrorAttachedEvent,
+  MirrorMoveEvent,
+  MirrorDestroyEvent,
+} from './events/mirror-event';
+
+const defaults = {
+  draggable: '.draggable-source',
+  handle: null,
+  delay: 0,
+  placedTimeout: 800,
+  native: false,
+  plugins: [Mirror, Accessibility],
+  classes: {
+    'container:dragging': 'draggable-container--is-dragging',
+    'source:dragging': 'draggable-source--is-dragging',
+    'source:placed': 'draggable-source--placed',
+    'container:placed': 'draggable-container--placed',
+    'body:dragging': 'draggable--is-dragging',
+    'draggable:over': 'draggable--over',
+    'container:over': 'draggable-container--over',
+    mirror: 'draggable-mirror',
+  },
+};
+
+/**
+ * This is the core draggable library that does the heavy lifting
+ * @module Draggable
+ */
+export default class Draggable {
+  static get Plugins() {
+    return {Accessibility, Mirror};
+  }
+
+  static get Behaviour() {
+    return {Collidable, Snappable};
+  }
+
+  /**
+   * Draggable constructor.
+   * @constructs Draggable
+   * @param {Array|NodeList} containers - Draggable containers
+   * @param {Object} options - Options for draggable
+   */
+  constructor(containers = [], options = {}) {
+    this.containers = containers;
+    this.options = Object.assign({}, defaults, options);
+    this.activeSensors = [];
+    this.activePlugins = [];
+    this.callbacks = {};
+    this.dragging = false;
+
+    this.dragStart = this.dragStart.bind(this);
+    this.dragMove = this.dragMove.bind(this);
+    this.dragStop = this.dragStop.bind(this);
+    this.dragPressure = this.dragPressure.bind(this);
+
+    for (const container of this.containers) {
+      container.addEventListener('drag:start', this.dragStart, true);
+      container.addEventListener('drag:move', this.dragMove, true);
+      container.addEventListener('drag:stop', this.dragStop, true);
+      container.addEventListener('drag:pressure', this.dragPressure, true);
+    }
+
+    for (const Plugin of this.options.plugins) {
+      const plugin = new Plugin(this);
+      plugin.attach();
+      this.activePlugins.push(plugin);
+    }
+
+    for (const Sensor of this.sensors()) {
+      const sensor = new Sensor(this.containers, options);
+      sensor.attach();
+      this.activeSensors.push(sensor);
+    }
+
+    const draggableInitializedEvent = new DraggableInitializedEvent({
+      draggable: this,
+    });
+
+    this.triggerEvent(draggableInitializedEvent);
+  }
+
+  /**
+   * Destroys Draggable instance. This removes all internal event listeners and
+   * deactivates sensors and plugins
+   */
+  destroy() {
+    for (const container of this.containers) {
+      container.removeEventListener('drag:start', this.dragStart, true);
+      container.removeEventListener('drag:move', this.dragMove, true);
+      container.removeEventListener('drag:stop', this.dragStop, true);
+      container.removeEventListener('drag:pressure', this.dragPressure, true);
+    }
+
+    const draggableDestroyEvent = new DraggableDestroyEvent({
+      draggable: this,
+    });
+
+    this.triggerEvent(draggableDestroyEvent);
+
+    for (const activePlugin of this.activePlugins) {
+      activePlugin.detach();
+    }
+
+    for (const activeSensor of this.activeSensors) {
+      activeSensor.detach();
+    }
+  }
+
+  /**
+   * Adds listener for draggable events
+   * @example draggable.on('drag:start', (dragEvent) => dragEvent.cancel());
+   */
+  on(type, callback) {
+    if (!this.callbacks[type]) {
+      this.callbacks[type] = [];
+    }
+
+    this.callbacks[type].push(callback);
+    return this;
+  }
+
+  /**
+   * Removes listener from draggable
+   * @example draggable.off('drag:start', handlerFunction);
+   */
+  off(type, callback) {
+    if (!this.callbacks[type]) { return null; }
+    const copy = this.callbacks[type].slice(0);
+    for (let i = 0; i < copy.length; i++) {
+      if (callback === copy[i]) {
+        this.callbacks[type].splice(i, 1);
+      }
+    }
+    return this;
+  }
+
+  trigger(type, ...args) {
+    if (!this.callbacks[type]) { return; }
+    for (let i = this.callbacks[type].length - 1; i >= 0; i--) {
+      const callback = this.callbacks[type][i];
+      callback(...args);
+    }
+  }
+
+  /**
+   * Active sensors
+   * @return {Array} sensors
+   */
+  sensors() {
+    return [
+      TouchSensor,
+      ForceTouchSensor,
+      (this.options.native ? DragSensor : MouseSensor),
+    ];
+  }
+
+  dragStart(event) {
+    const sensorEvent = getSensorEvent(event);
+    const {target, container, originalEvent} = sensorEvent;
+
+    if (this.options.handle && target && !closest(target, this.options.handle)) {
+      sensorEvent.cancel();
+      return;
+    }
+
+    // Find draggable source element
+    this.source = closest(target, this.options.draggable);
+    this.sourceContainer = container;
+
+    if (!this.source) {
+      sensorEvent.cancel();
+      return;
+    }
+
+    this.dragging = true;
+
+    if (!isDragEvent(originalEvent)) {
+      const appendableContainer = this.getAppendableContainer({source: this.source});
+      this.mirror = this.source.cloneNode(true);
+
+      const mirrorCreatedEvent = new MirrorCreatedEvent({
+        source: this.source,
+        mirror: this.mirror,
+        sourceContainer: container,
+        sensorEvent,
+      });
+
+      const mirrorAttachedEvent = new MirrorAttachedEvent({
+        source: this.source,
+        mirror: this.mirror,
+        sourceContainer: container,
+        sensorEvent,
+      });
+
+      this.triggerEvent(mirrorCreatedEvent);
+      appendableContainer.appendChild(this.mirror);
+      this.triggerEvent(mirrorAttachedEvent);
+    }
+
+    this.source.classList.add(this.getClassNameFor('source:dragging'));
+    this.sourceContainer.classList.add(this.getClassNameFor('container:dragging'));
+    document.body.classList.add(this.getClassNameFor('body:dragging'));
+
+    if (this.mirror) {
+      const mirrorMoveEvent = new MirrorMoveEvent({
+        source: this.source,
+        mirror: this.mirror,
+        sourceContainer: container,
+        sensorEvent,
+      });
+
+      this.triggerEvent(mirrorMoveEvent);
+    }
+
+    // Find the closest scrollable parent
+    this.scrollableParent = closest(container, (element) => element.offsetHeight < element.scrollHeight);
+
+    const dragEvent = new DragStartEvent({
+      source: this.source,
+      mirror: this.mirror,
+      sourceContainer: container,
+      sensorEvent,
+    });
+
+    this.triggerEvent(dragEvent);
+
+    if (!dragEvent.canceled()) {
+      return;
+    }
+
+    if (this.mirror) {
+      this.mirror.parentNode.removeChild(this.mirror);
+    }
+
+    this.source.classList.remove(this.getClassNameFor('source:dragging'));
+    this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging'));
+    document.body.classList.remove(this.getClassNameFor('body:dragging'));
+  }
+
+  triggerEvent(event) {
+    return this.trigger(event.type, event);
+  }
+
+  dragMove(event) {
+    const sensorEvent = getSensorEvent(event);
+    const {container} = sensorEvent;
+    let target = sensorEvent.target;
+
+    const dragMoveEvent = new DragMoveEvent({
+      source: this.source,
+      mirror: this.mirror,
+      sourceContainer: container,
+      sensorEvent,
+    });
+
+    this.triggerEvent(dragMoveEvent);
+
+    if (dragMoveEvent.canceled()) {
+      sensorEvent.cancel();
+    }
+
+    if (this.mirror && !dragMoveEvent.canceled()) {
+      const mirrorMoveEvent = new MirrorMoveEvent({
+        source: this.source,
+        mirror: this.mirror,
+        sourceContainer: container,
+        sensorEvent,
+      });
+
+      this.triggerEvent(mirrorMoveEvent);
+    }
+
+    target = closest(target, this.options.draggable);
+    const overContainer = sensorEvent.overContainer || this.closestContainer(sensorEvent.target);
+    const isLeavingContainer = this.currentOverContainer && (overContainer !== this.currentOverContainer);
+    const isLeavingDraggable = this.currentOver && (target !== this.currentOver);
+    const isOverContainer = overContainer && (this.currentOverContainer !== overContainer);
+    const isOverDraggable = target && (this.currentOver !== target);
+
+    if (isLeavingDraggable) {
+      const dragOutEvent = new DragOutEvent({
+        source: this.source,
+        mirror: this.mirror,
+        sourceContainer: container,
+        sensorEvent,
+        over: this.currentOver,
+      });
+
+      this.triggerEvent(dragOutEvent);
+
+      this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
+      this.currentOver = null;
+    }
+
+    if (isLeavingContainer) {
+      const dragOutContainerEvent = new DragOutContainerEvent({
+        source: this.source,
+        mirror: this.mirror,
+        sourceContainer: container,
+        sensorEvent,
+        overContainer: this.overContainer,
+      });
+
+      this.triggerEvent(dragOutContainerEvent);
+
+      this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
+      this.currentOverContainer = null;
+    }
+
+    if (isOverContainer) {
+      overContainer.classList.add(this.getClassNameFor('container:over'));
+
+      const dragOverContainerEvent = new DragOverContainerEvent({
+        source: this.source,
+        mirror: this.mirror,
+        sourceContainer: container,
+        sensorEvent,
+        overContainer,
+      });
+
+      this.triggerEvent(dragOverContainerEvent);
+
+      this.currentOverContainer = overContainer;
+    }
+
+    if (isOverDraggable) {
+      target.classList.add(this.getClassNameFor('draggable:over'));
+
+      const dragOverEvent = new DragOverEvent({
+        source: this.source,
+        mirror: this.mirror,
+        sourceContainer: container,
+        sensorEvent,
+        overContainer,
+        over: target,
+      });
+
+      this.triggerEvent(dragOverEvent);
+
+      this.currentOver = target;
+    }
+  }
+
+  dragStop(event) {
+    this.dragging = false;
+
+    const sensorEvent = getSensorEvent(event);
+    const dragStopEvent = new DragStopEvent({
+      source: this.source,
+      mirror: this.mirror,
+      sensorEvent: event.sensorEvent,
+      sourceContainer: this.sourceContainer,
+    });
+
+    this.triggerEvent(dragStopEvent);
+
+    this.source.classList.remove(this.getClassNameFor('source:dragging'));
+    this.source.classList.add(this.getClassNameFor('source:placed'));
+    this.sourceContainer.classList.add(this.getClassNameFor('container:placed'));
+    this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging'));
+    document.body.classList.remove(this.getClassNameFor('body:dragging'));
+
+    if (this.currentOver) {
+      this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
+    }
+
+    if (this.currentOverContainer) {
+      this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
+    }
+
+    if (this.mirror) {
+      const mirrorDestroyEvent = new MirrorDestroyEvent({
+        source: this.source,
+        mirror: this.mirror,
+        sourceContainer: sensorEvent.container,
+        sensorEvent,
+      });
+
+      this.triggerEvent(mirrorDestroyEvent);
+
+      if (!mirrorDestroyEvent.canceled()) {
+        this.mirror.parentNode.removeChild(this.mirror);
+      }
+    }
+
+    const lastSource = this.source;
+    const lastSourceContainer = this.sourceContainer;
+
+    setTimeout(() => {
+      if (lastSource) {
+        lastSource.classList.remove(this.getClassNameFor('source:placed'));
+      }
+
+      if (lastSourceContainer) {
+        lastSourceContainer.classList.remove(this.getClassNameFor('container:placed'));
+      }
+    }, this.options.placedTimeout);
+
+    this.source = null;
+    this.mirror = null;
+    this.currentOverContainer = null;
+    this.currentOver = null;
+    this.sourceContainer = null;
+  }
+
+  dragPressure(event) {
+    const sensorEvent = getSensorEvent(event);
+    const source = this.source || closest(sensorEvent.originalEvent.target, this.options.draggable);
+
+    const dragPressureEvent = new DragPressureEvent({
+      sensorEvent,
+      source,
+      pressure: sensorEvent.pressure,
+    });
+
+    this.triggerEvent(dragPressureEvent);
+  }
+
+  getAppendableContainer({source}) {
+    const appendTo = this.options.appendTo;
+
+    if (typeof appendTo === 'string') {
+      return document.querySelector(appendTo);
+    } else if (appendTo instanceof HTMLElement) {
+      return appendTo;
+    } else if (typeof appendTo === 'function') {
+      return appendTo(source);
+    } else {
+      return document.body;
+    }
+  }
+
+  getClassNameFor(name) {
+    return this.options.classes[name] || defaults.classes[name];
+  }
+
+  closestContainer(target) {
+    return closest(target, (element) => {
+      for (const containerEl of this.containers) {
+        if (element === containerEl) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+}
+
+function getSensorEvent(event) {
+  return event.detail;
+}
+
+function isDragEvent(event) {
+  return /^drag/.test(event.type);
+}