diff --git a/bootstrap/webapp/templates/layout.html b/bootstrap/webapp/templates/layout.html
index 175fa15..3517de0 100644
--- a/bootstrap/webapp/templates/layout.html
+++ b/bootstrap/webapp/templates/layout.html
@@ -55,6 +55,11 @@
       width: 70px;
     }
 
+    input[type=checkbox] {
+      min-width: 50px;
+      width: 50px;
+    }
+
     select {
       min-width: 300px;
     }
@@ -197,6 +202,8 @@
 <script src="{{ url_for('oshipka_bp.static', filename='js/lightbox.js') }}"></script>
 <script src="{{ url_for('oshipka_bp.static', filename='js/chosen.js') }}"></script>
 <script src="{{ url_for('oshipka_bp.static', filename='js/datatables.js') }}"></script>
+<script src="{{ url_for('oshipka_bp.static', filename='js/fuse.js') }}"></script>
+<script src="{{ url_for('oshipka_bp.static', filename='js/draggable.js') }}"></script>
 <script src="{{ url_for('oshipka_bp.static', filename='js/oshipka.js') }}"></script>
 {% block script %}
 <script>
diff --git a/oshipka/webapp/static/js/draggable.js b/oshipka/webapp/static/js/draggable.js
new file mode 100644
index 0000000..9b5c687
--- /dev/null
+++ b/oshipka/webapp/static/js/draggable.js
@@ -0,0 +1,7019 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define("Draggable", [], factory);
+	else if(typeof exports === 'object')
+		exports["Draggable"] = factory();
+	else
+		root["Draggable"] = factory();
+})(window, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 66);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _AbstractEvent = __webpack_require__(64);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _AbstractEvent2.default;
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _AbstractPlugin = __webpack_require__(60);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _AbstractPlugin2.default;
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _closest = __webpack_require__(51);
+
+Object.defineProperty(exports, 'closest', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_closest).default;
+  }
+});
+
+var _requestNextAnimationFrame = __webpack_require__(49);
+
+Object.defineProperty(exports, 'requestNextAnimationFrame', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_requestNextAnimationFrame).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _SensorEvent = __webpack_require__(44);
+
+Object.keys(_SensorEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SensorEvent[key];
+    }
+  });
+});
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Sensor = __webpack_require__(47);
+
+var _Sensor2 = _interopRequireDefault(_Sensor);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Sensor2.default;
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DragEvent = __webpack_require__(14);
+
+Object.keys(_DragEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DragEvent[key];
+    }
+  });
+});
+
+var _DraggableEvent = __webpack_require__(13);
+
+Object.keys(_DraggableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DraggableEvent[key];
+    }
+  });
+});
+
+var _Plugins = __webpack_require__(12);
+
+Object.keys(_Plugins).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Plugins[key];
+    }
+  });
+});
+
+var _Sensors = __webpack_require__(6);
+
+Object.keys(_Sensors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Sensors[key];
+    }
+  });
+});
+
+var _Draggable = __webpack_require__(37);
+
+var _Draggable2 = _interopRequireDefault(_Draggable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Draggable2.default;
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Sensor = __webpack_require__(4);
+
+Object.defineProperty(exports, 'Sensor', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Sensor).default;
+  }
+});
+
+var _MouseSensor = __webpack_require__(46);
+
+Object.defineProperty(exports, 'MouseSensor', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_MouseSensor).default;
+  }
+});
+
+var _TouchSensor = __webpack_require__(43);
+
+Object.defineProperty(exports, 'TouchSensor', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_TouchSensor).default;
+  }
+});
+
+var _DragSensor = __webpack_require__(41);
+
+Object.defineProperty(exports, 'DragSensor', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_DragSensor).default;
+  }
+});
+
+var _ForceTouchSensor = __webpack_require__(39);
+
+Object.defineProperty(exports, 'ForceTouchSensor', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_ForceTouchSensor).default;
+  }
+});
+
+var _SensorEvent = __webpack_require__(3);
+
+Object.keys(_SensorEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SensorEvent[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _SnappableEvent = __webpack_require__(18);
+
+Object.keys(_SnappableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SnappableEvent[key];
+    }
+  });
+});
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _CollidableEvent = __webpack_require__(23);
+
+Object.keys(_CollidableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CollidableEvent[key];
+    }
+  });
+});
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _SortableEvent = __webpack_require__(27);
+
+Object.keys(_SortableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SortableEvent[key];
+    }
+  });
+});
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _SwappableEvent = __webpack_require__(30);
+
+Object.keys(_SwappableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SwappableEvent[key];
+    }
+  });
+});
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DroppableEvent = __webpack_require__(33);
+
+Object.keys(_DroppableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DroppableEvent[key];
+    }
+  });
+});
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Announcement = __webpack_require__(62);
+
+Object.defineProperty(exports, 'Announcement', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Announcement).default;
+  }
+});
+Object.defineProperty(exports, 'defaultAnnouncementOptions', {
+  enumerable: true,
+  get: function () {
+    return _Announcement.defaultOptions;
+  }
+});
+
+var _Focusable = __webpack_require__(59);
+
+Object.defineProperty(exports, 'Focusable', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Focusable).default;
+  }
+});
+
+var _Mirror = __webpack_require__(57);
+
+Object.defineProperty(exports, 'Mirror', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Mirror).default;
+  }
+});
+Object.defineProperty(exports, 'defaultMirrorOptions', {
+  enumerable: true,
+  get: function () {
+    return _Mirror.defaultOptions;
+  }
+});
+
+var _Scrollable = __webpack_require__(53);
+
+Object.defineProperty(exports, 'Scrollable', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Scrollable).default;
+  }
+});
+Object.defineProperty(exports, 'defaultScrollableOptions', {
+  enumerable: true,
+  get: function () {
+    return _Scrollable.defaultOptions;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DraggableEvent = __webpack_require__(63);
+
+Object.keys(_DraggableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DraggableEvent[key];
+    }
+  });
+});
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DragEvent = __webpack_require__(65);
+
+Object.keys(_DragEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DragEvent[key];
+    }
+  });
+});
+
+/***/ }),
+/* 15 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _AbstractPlugin = __webpack_require__(1);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onSortableSorted = Symbol('onSortableSorted');
+
+/**
+ * SwapAnimation default options
+ * @property {Object} defaultOptions
+ * @property {Number} defaultOptions.duration
+ * @property {String} defaultOptions.easingFunction
+ * @property {Boolean} defaultOptions.horizontal
+ * @type {Object}
+ */
+const defaultOptions = exports.defaultOptions = {
+  duration: 150,
+  easingFunction: 'ease-in-out',
+  horizontal: false
+};
+
+/**
+ * SwapAnimation plugin adds swap animations for sortable
+ * @class SwapAnimation
+ * @module SwapAnimation
+ * @extends AbstractPlugin
+ */
+class SwapAnimation extends _AbstractPlugin2.default {
+  /**
+   * SwapAnimation constructor.
+   * @constructs SwapAnimation
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    super(draggable);
+
+    /**
+     * SwapAnimation options
+     * @property {Object} options
+     * @property {Number} defaultOptions.duration
+     * @property {String} defaultOptions.easingFunction
+     * @type {Object}
+     */
+    this.options = _extends({}, defaultOptions, this.getOptions());
+
+    /**
+     * Last animation frame
+     * @property {Number} lastAnimationFrame
+     * @type {Number}
+     */
+    this.lastAnimationFrame = null;
+
+    this[onSortableSorted] = this[onSortableSorted].bind(this);
+  }
+
+  /**
+   * Attaches plugins event listeners
+   */
+  attach() {
+    this.draggable.on('sortable:sorted', this[onSortableSorted]);
+  }
+
+  /**
+   * Detaches plugins event listeners
+   */
+  detach() {
+    this.draggable.off('sortable:sorted', this[onSortableSorted]);
+  }
+
+  /**
+   * Returns options passed through draggable
+   * @return {Object}
+   */
+  getOptions() {
+    return this.draggable.options.swapAnimation || {};
+  }
+
+  /**
+   * Sortable sorted handler
+   * @param {SortableSortedEvent} sortableEvent
+   * @private
+   */
+  [onSortableSorted]({ oldIndex, newIndex, dragEvent }) {
+    const { source, over } = dragEvent;
+
+    cancelAnimationFrame(this.lastAnimationFrame);
+
+    // Can be done in a separate frame
+    this.lastAnimationFrame = requestAnimationFrame(() => {
+      if (oldIndex >= newIndex) {
+        animate(source, over, this.options);
+      } else {
+        animate(over, source, this.options);
+      }
+    });
+  }
+}
+
+exports.default = SwapAnimation; /**
+                                  * Animates two elements
+                                  * @param {HTMLElement} from
+                                  * @param {HTMLElement} to
+                                  * @param {Object} options
+                                  * @param {Number} options.duration
+                                  * @param {String} options.easingFunction
+                                  * @param {String} options.horizontal
+                                  * @private
+                                  */
+
+function animate(from, to, { duration, easingFunction, horizontal }) {
+  for (const element of [from, to]) {
+    element.style.pointerEvents = 'none';
+  }
+
+  if (horizontal) {
+    const width = from.offsetWidth;
+    from.style.transform = `translate3d(${width}px, 0, 0)`;
+    to.style.transform = `translate3d(-${width}px, 0, 0)`;
+  } else {
+    const height = from.offsetHeight;
+    from.style.transform = `translate3d(0, ${height}px, 0)`;
+    to.style.transform = `translate3d(0, -${height}px, 0)`;
+  }
+
+  requestAnimationFrame(() => {
+    for (const element of [from, to]) {
+      element.addEventListener('transitionend', resetElementOnTransitionEnd);
+      element.style.transition = `transform ${duration}ms ${easingFunction}`;
+      element.style.transform = '';
+    }
+  });
+}
+
+/**
+ * Resets animation style properties after animation has completed
+ * @param {Event} event
+ * @private
+ */
+function resetElementOnTransitionEnd(event) {
+  event.target.style.transition = '';
+  event.target.style.pointerEvents = '';
+  event.target.removeEventListener('transitionend', resetElementOnTransitionEnd);
+}
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = undefined;
+
+var _SwapAnimation = __webpack_require__(15);
+
+var _SwapAnimation2 = _interopRequireDefault(_SwapAnimation);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _SwapAnimation2.default;
+exports.defaultOptions = _SwapAnimation.defaultOptions;
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _AbstractPlugin = __webpack_require__(1);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+var _SnappableEvent = __webpack_require__(7);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onDragStart = Symbol('onDragStart');
+const onDragStop = Symbol('onDragStop');
+const onDragOver = Symbol('onDragOver');
+const onDragOut = Symbol('onDragOut');
+const onMirrorCreated = Symbol('onMirrorCreated');
+const onMirrorDestroy = Symbol('onMirrorDestroy');
+
+/**
+ * Snappable plugin which snaps draggable elements into place
+ * @class Snappable
+ * @module Snappable
+ * @extends AbstractPlugin
+ */
+class Snappable extends _AbstractPlugin2.default {
+  /**
+   * Snappable constructor.
+   * @constructs Snappable
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    super(draggable);
+
+    /**
+     * Keeps track of the first source element
+     * @property {HTMLElement|null} firstSource
+     */
+    this.firstSource = null;
+
+    /**
+     * Keeps track of the mirror element
+     * @property {HTMLElement} mirror
+     */
+    this.mirror = null;
+
+    this[onDragStart] = this[onDragStart].bind(this);
+    this[onDragStop] = this[onDragStop].bind(this);
+    this[onDragOver] = this[onDragOver].bind(this);
+    this[onDragOut] = this[onDragOut].bind(this);
+    this[onMirrorCreated] = this[onMirrorCreated].bind(this);
+    this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
+  }
+
+  /**
+   * Attaches plugins event listeners
+   */
+  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]).on('mirror:created', this[onMirrorCreated]).on('mirror:destroy', this[onMirrorDestroy]);
+  }
+
+  /**
+   * Detaches plugins event listeners
+   */
+  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]).off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]);
+  }
+
+  /**
+   * Drag start handler
+   * @private
+   * @param {DragStartEvent} event - Drag start event
+   */
+  [onDragStart](event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    this.firstSource = event.source;
+  }
+
+  /**
+   * Drag stop handler
+   * @private
+   * @param {DragStopEvent} event - Drag stop event
+   */
+  [onDragStop]() {
+    this.firstSource = null;
+  }
+
+  /**
+   * Drag over handler
+   * @private
+   * @param {DragOverEvent|DroppableOverEvent} event - Drag over event
+   */
+  [onDragOver](event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    const source = event.source || event.dragEvent.source;
+
+    if (source === this.firstSource) {
+      this.firstSource = null;
+      return;
+    }
+
+    const snapInEvent = new _SnappableEvent.SnapInEvent({
+      dragEvent: event,
+      snappable: event.over || event.droppable
+    });
+
+    this.draggable.trigger(snapInEvent);
+
+    if (snapInEvent.canceled()) {
+      return;
+    }
+
+    if (this.mirror) {
+      this.mirror.style.display = 'none';
+    }
+
+    source.classList.remove(this.draggable.getClassNameFor('source:dragging'));
+    source.classList.add(this.draggable.getClassNameFor('source:placed'));
+
+    // Need to cancel this in drag out
+    setTimeout(() => {
+      source.classList.remove(this.draggable.getClassNameFor('source:placed'));
+    }, this.draggable.options.placedTimeout);
+  }
+
+  /**
+   * Drag out handler
+   * @private
+   * @param {DragOutEvent|DroppableOutEvent} event - Drag out event
+   */
+  [onDragOut](event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    const source = event.source || event.dragEvent.source;
+
+    const snapOutEvent = new _SnappableEvent.SnapOutEvent({
+      dragEvent: event,
+      snappable: event.over || event.droppable
+    });
+
+    this.draggable.trigger(snapOutEvent);
+
+    if (snapOutEvent.canceled()) {
+      return;
+    }
+
+    if (this.mirror) {
+      this.mirror.style.display = '';
+    }
+
+    source.classList.add(this.draggable.getClassNameFor('source:dragging'));
+  }
+
+  /**
+   * Mirror created handler
+   * @param {MirrorCreatedEvent} mirrorEvent
+   * @private
+   */
+  [onMirrorCreated]({ mirror }) {
+    this.mirror = mirror;
+  }
+
+  /**
+   * Mirror destroy handler
+   * @param {MirrorDestroyEvent} mirrorEvent
+   * @private
+   */
+  [onMirrorDestroy]() {
+    this.mirror = null;
+  }
+}
+exports.default = Snappable;
+
+/***/ }),
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SnapOutEvent = exports.SnapInEvent = exports.SnapEvent = undefined;
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Base snap event
+ * @class SnapEvent
+ * @module SnapEvent
+ * @extends AbstractEvent
+ */
+class SnapEvent extends _AbstractEvent2.default {
+
+  /**
+   * Drag event that triggered this snap event
+   * @property dragEvent
+   * @type {DragEvent}
+   * @readonly
+   */
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+
+  /**
+   * Snappable element
+   * @property snappable
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get snappable() {
+    return this.data.snappable;
+  }
+}
+
+exports.SnapEvent = SnapEvent; /**
+                                * Snap in event
+                                * @class SnapInEvent
+                                * @module SnapInEvent
+                                * @extends SnapEvent
+                                */
+
+SnapEvent.type = 'snap';
+class SnapInEvent extends SnapEvent {}
+
+exports.SnapInEvent = SnapInEvent; /**
+                                    * Snap out event
+                                    * @class SnapOutEvent
+                                    * @module SnapOutEvent
+                                    * @extends SnapEvent
+                                    */
+
+SnapInEvent.type = 'snap:in';
+SnapInEvent.cancelable = true;
+class SnapOutEvent extends SnapEvent {}
+exports.SnapOutEvent = SnapOutEvent;
+SnapOutEvent.type = 'snap:out';
+SnapOutEvent.cancelable = true;
+
+/***/ }),
+/* 19 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _SnappableEvent = __webpack_require__(7);
+
+Object.keys(_SnappableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SnappableEvent[key];
+    }
+  });
+});
+
+var _Snappable = __webpack_require__(17);
+
+var _Snappable2 = _interopRequireDefault(_Snappable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Snappable2.default;
+
+/***/ }),
+/* 20 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _AbstractPlugin = __webpack_require__(1);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+var _utils = __webpack_require__(2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onMirrorCreated = Symbol('onMirrorCreated');
+const onMirrorDestroy = Symbol('onMirrorDestroy');
+const onDragOver = Symbol('onDragOver');
+const resize = Symbol('resize');
+
+/**
+ * ResizeMirror default options
+ * @property {Object} defaultOptions
+ * @type {Object}
+ */
+const defaultOptions = exports.defaultOptions = {};
+
+/**
+ * The ResizeMirror plugin resizes the mirror element to the dimensions of the draggable element that the mirror is hovering over
+ * @class ResizeMirror
+ * @module ResizeMirror
+ * @extends AbstractPlugin
+ */
+class ResizeMirror extends _AbstractPlugin2.default {
+  /**
+   * ResizeMirror constructor.
+   * @constructs ResizeMirror
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    super(draggable);
+
+    /**
+     * ResizeMirror options
+     * @property {Object} options
+     * @type {Object}
+     */
+    this.options = _extends({}, defaultOptions, this.getOptions());
+
+    /**
+     * ResizeMirror remembers the last width when resizing the mirror
+     * to avoid additional writes to the DOM
+     * @property {number} lastWidth
+     */
+    this.lastWidth = 0;
+
+    /**
+     * ResizeMirror remembers the last height when resizing the mirror
+     * to avoid additional writes to the DOM
+     * @property {number} lastHeight
+     */
+    this.lastHeight = 0;
+
+    /**
+     * Keeps track of the mirror element
+     * @property {HTMLElement} mirror
+     */
+    this.mirror = null;
+
+    this[onMirrorCreated] = this[onMirrorCreated].bind(this);
+    this[onMirrorDestroy] = this[onMirrorDestroy].bind(this);
+    this[onDragOver] = this[onDragOver].bind(this);
+  }
+
+  /**
+   * Attaches plugins event listeners
+   */
+  attach() {
+    this.draggable.on('mirror:created', this[onMirrorCreated]).on('drag:over', this[onDragOver]).on('drag:over:container', this[onDragOver]);
+  }
+
+  /**
+   * Detaches plugins event listeners
+   */
+  detach() {
+    this.draggable.off('mirror:created', this[onMirrorCreated]).off('mirror:destroy', this[onMirrorDestroy]).off('drag:over', this[onDragOver]).off('drag:over:container', this[onDragOver]);
+  }
+
+  /**
+   * Returns options passed through draggable
+   * @return {Object}
+   */
+  getOptions() {
+    return this.draggable.options.resizeMirror || {};
+  }
+
+  /**
+   * Mirror created handler
+   * @param {MirrorCreatedEvent} mirrorEvent
+   * @private
+   */
+  [onMirrorCreated]({ mirror }) {
+    this.mirror = mirror;
+  }
+
+  /**
+   * Mirror destroy handler
+   * @param {MirrorDestroyEvent} mirrorEvent
+   * @private
+   */
+  [onMirrorDestroy]() {
+    this.mirror = null;
+  }
+
+  /**
+   * Drag over handler
+   * @param {DragOverEvent | DragOverContainer} dragEvent
+   * @private
+   */
+  [onDragOver](dragEvent) {
+    this[resize](dragEvent);
+  }
+
+  /**
+   * Resize function for
+   * @param {DragOverEvent | DragOverContainer} dragEvent
+   * @private
+   */
+  [resize]({ overContainer, over }) {
+    requestAnimationFrame(() => {
+      if (this.mirror.parentNode !== overContainer) {
+        overContainer.appendChild(this.mirror);
+      }
+
+      const overElement = over || this.draggable.getDraggableElementsForContainer(overContainer)[0];
+
+      if (!overElement) {
+        return;
+      }
+
+      (0, _utils.requestNextAnimationFrame)(() => {
+        const overRect = overElement.getBoundingClientRect();
+
+        if (this.lastHeight === overRect.height && this.lastWidth === overRect.width) {
+          return;
+        }
+
+        this.mirror.style.width = `${overRect.width}px`;
+        this.mirror.style.height = `${overRect.height}px`;
+
+        this.lastWidth = overRect.width;
+        this.lastHeight = overRect.height;
+      });
+    });
+  }
+}
+exports.default = ResizeMirror;
+
+/***/ }),
+/* 21 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = undefined;
+
+var _ResizeMirror = __webpack_require__(20);
+
+var _ResizeMirror2 = _interopRequireDefault(_ResizeMirror);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _ResizeMirror2.default;
+exports.defaultOptions = _ResizeMirror.defaultOptions;
+
+/***/ }),
+/* 22 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _AbstractPlugin = __webpack_require__(1);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+var _utils = __webpack_require__(2);
+
+var _CollidableEvent = __webpack_require__(8);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onDragMove = Symbol('onDragMove');
+const onDragStop = Symbol('onDragStop');
+const onRequestAnimationFrame = Symbol('onRequestAnimationFrame');
+
+/**
+ * Collidable plugin which detects colliding elements while dragging
+ * @class Collidable
+ * @module Collidable
+ * @extends AbstractPlugin
+ */
+class Collidable extends _AbstractPlugin2.default {
+  /**
+   * Collidable constructor.
+   * @constructs Collidable
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    super(draggable);
+
+    /**
+     * Keeps track of currently colliding elements
+     * @property {HTMLElement|null} currentlyCollidingElement
+     * @type {HTMLElement|null}
+     */
+    this.currentlyCollidingElement = null;
+
+    /**
+     * Keeps track of currently colliding elements
+     * @property {HTMLElement|null} lastCollidingElement
+     * @type {HTMLElement|null}
+     */
+    this.lastCollidingElement = null;
+
+    /**
+     * Animation frame for finding colliding elements
+     * @property {Number|null} currentAnimationFrame
+     * @type {Number|null}
+     */
+    this.currentAnimationFrame = null;
+
+    this[onDragMove] = this[onDragMove].bind(this);
+    this[onDragStop] = this[onDragStop].bind(this);
+    this[onRequestAnimationFrame] = this[onRequestAnimationFrame].bind(this);
+  }
+
+  /**
+   * Attaches plugins event listeners
+   */
+  attach() {
+    this.draggable.on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
+  }
+
+  /**
+   * Detaches plugins event listeners
+   */
+  detach() {
+    this.draggable.off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
+  }
+
+  /**
+   * Returns current collidables based on `collidables` option
+   * @return {HTMLElement[]}
+   */
+  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 [];
+    }
+  }
+
+  /**
+   * Drag move handler
+   * @private
+   * @param {DragMoveEvent} event - Drag move event
+   */
+  [onDragMove](event) {
+    const target = event.sensorEvent.target;
+
+    this.currentAnimationFrame = requestAnimationFrame(this[onRequestAnimationFrame](target));
+
+    if (this.currentlyCollidingElement) {
+      event.cancel();
+    }
+
+    const collidableInEvent = new _CollidableEvent.CollidableInEvent({
+      dragEvent: event,
+      collidingElement: this.currentlyCollidingElement
+    });
+
+    const collidableOutEvent = new _CollidableEvent.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.trigger(collidableOutEvent);
+      }
+
+      this.draggable.trigger(collidableInEvent);
+    } else if (leavingCollidable) {
+      this.draggable.trigger(collidableOutEvent);
+    }
+
+    this.lastCollidingElement = this.currentlyCollidingElement;
+  }
+
+  /**
+   * Drag stop handler
+   * @private
+   * @param {DragStopEvent} event - Drag stop event
+   */
+  [onDragStop](event) {
+    const lastCollidingElement = this.currentlyCollidingElement || this.lastCollidingElement;
+    const collidableOutEvent = new _CollidableEvent.CollidableOutEvent({
+      dragEvent: event,
+      collidingElement: lastCollidingElement
+    });
+
+    if (lastCollidingElement) {
+      this.draggable.trigger(collidableOutEvent);
+    }
+
+    this.lastCollidingElement = null;
+    this.currentlyCollidingElement = null;
+  }
+
+  /**
+   * Animation frame function
+   * @private
+   * @param {HTMLElement} target - Current move target
+   * @return {Function}
+   */
+  [onRequestAnimationFrame](target) {
+    return () => {
+      const collidables = this.getCollidables();
+      this.currentlyCollidingElement = (0, _utils.closest)(target, element => collidables.includes(element));
+    };
+  }
+}
+exports.default = Collidable;
+
+/***/ }),
+/* 23 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollidableOutEvent = exports.CollidableInEvent = exports.CollidableEvent = undefined;
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Base collidable event
+ * @class CollidableEvent
+ * @module CollidableEvent
+ * @extends AbstractEvent
+ */
+class CollidableEvent extends _AbstractEvent2.default {
+
+  /**
+   * Drag event that triggered this colliable event
+   * @property dragEvent
+   * @type {DragEvent}
+   * @readonly
+   */
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+}
+
+exports.CollidableEvent = CollidableEvent; /**
+                                            * Collidable in event
+                                            * @class CollidableInEvent
+                                            * @module CollidableInEvent
+                                            * @extends CollidableEvent
+                                            */
+
+CollidableEvent.type = 'collidable';
+class CollidableInEvent extends CollidableEvent {
+
+  /**
+   * Element you are currently colliding with
+   * @property collidingElement
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get collidingElement() {
+    return this.data.collidingElement;
+  }
+}
+
+exports.CollidableInEvent = CollidableInEvent; /**
+                                                * Collidable out event
+                                                * @class CollidableOutEvent
+                                                * @module CollidableOutEvent
+                                                * @extends CollidableEvent
+                                                */
+
+CollidableInEvent.type = 'collidable:in';
+class CollidableOutEvent extends CollidableEvent {
+
+  /**
+   * Element you were previously colliding with
+   * @property collidingElement
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get collidingElement() {
+    return this.data.collidingElement;
+  }
+}
+exports.CollidableOutEvent = CollidableOutEvent;
+CollidableOutEvent.type = 'collidable:out';
+
+/***/ }),
+/* 24 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _CollidableEvent = __webpack_require__(8);
+
+Object.keys(_CollidableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CollidableEvent[key];
+    }
+  });
+});
+
+var _Collidable = __webpack_require__(22);
+
+var _Collidable2 = _interopRequireDefault(_Collidable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Collidable2.default;
+
+/***/ }),
+/* 25 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Collidable = __webpack_require__(24);
+
+Object.defineProperty(exports, 'Collidable', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Collidable).default;
+  }
+});
+
+var _ResizeMirror = __webpack_require__(21);
+
+Object.defineProperty(exports, 'ResizeMirror', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_ResizeMirror).default;
+  }
+});
+Object.defineProperty(exports, 'defaultResizeMirrorOptions', {
+  enumerable: true,
+  get: function () {
+    return _ResizeMirror.defaultOptions;
+  }
+});
+
+var _Snappable = __webpack_require__(19);
+
+Object.defineProperty(exports, 'Snappable', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Snappable).default;
+  }
+});
+
+var _SwapAnimation = __webpack_require__(16);
+
+Object.defineProperty(exports, 'SwapAnimation', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_SwapAnimation).default;
+  }
+});
+Object.defineProperty(exports, 'defaultSwapAnimationOptions', {
+  enumerable: true,
+  get: function () {
+    return _SwapAnimation.defaultOptions;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+/* 26 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _Draggable = __webpack_require__(5);
+
+var _Draggable2 = _interopRequireDefault(_Draggable);
+
+var _SortableEvent = __webpack_require__(9);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onDragStart = Symbol('onDragStart');
+const onDragOverContainer = Symbol('onDragOverContainer');
+const onDragOver = Symbol('onDragOver');
+const onDragStop = Symbol('onDragStop');
+
+/**
+ * Returns announcement message when a Draggable element has been sorted with another Draggable element
+ * or moved into a new container
+ * @param {SortableSortedEvent} sortableEvent
+ * @return {String}
+ */
+function onSortableSortedDefaultAnnouncement({ dragEvent }) {
+  const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'sortable element';
+
+  if (dragEvent.over) {
+    const overText = dragEvent.over.textContent.trim() || dragEvent.over.id || 'sortable element';
+    const isFollowing = dragEvent.source.compareDocumentPosition(dragEvent.over) & Node.DOCUMENT_POSITION_FOLLOWING;
+
+    if (isFollowing) {
+      return `Placed ${sourceText} after ${overText}`;
+    } else {
+      return `Placed ${sourceText} before ${overText}`;
+    }
+  } else {
+    // need to figure out how to compute container name
+    return `Placed ${sourceText} into a different container`;
+  }
+}
+
+/**
+ * @const {Object} defaultAnnouncements
+ * @const {Function} defaultAnnouncements['sortable:sorted']
+ */
+const defaultAnnouncements = {
+  'sortable:sorted': onSortableSortedDefaultAnnouncement
+};
+
+/**
+ * Sortable is built on top of Draggable and allows sorting of draggable elements. Sortable will keep
+ * track of the original index and emits the new index as you drag over draggable elements.
+ * @class Sortable
+ * @module Sortable
+ * @extends Draggable
+ */
+class Sortable extends _Draggable2.default {
+  /**
+   * Sortable constructor.
+   * @constructs Sortable
+   * @param {HTMLElement[]|NodeList|HTMLElement} containers - Sortable containers
+   * @param {Object} options - Options for Sortable
+   */
+  constructor(containers = [], options = {}) {
+    super(containers, _extends({}, options, {
+      announcements: _extends({}, defaultAnnouncements, options.announcements || {})
+    }));
+
+    /**
+     * start index of source on drag start
+     * @property startIndex
+     * @type {Number}
+     */
+    this.startIndex = null;
+
+    /**
+     * start container on drag start
+     * @property startContainer
+     * @type {HTMLElement}
+     * @default null
+     */
+    this.startContainer = null;
+
+    this[onDragStart] = this[onDragStart].bind(this);
+    this[onDragOverContainer] = this[onDragOverContainer].bind(this);
+    this[onDragOver] = this[onDragOver].bind(this);
+    this[onDragStop] = this[onDragStop].bind(this);
+
+    this.on('drag:start', this[onDragStart]).on('drag:over:container', this[onDragOverContainer]).on('drag:over', this[onDragOver]).on('drag:stop', this[onDragStop]);
+  }
+
+  /**
+   * Destroys Sortable instance.
+   */
+  destroy() {
+    super.destroy();
+
+    this.off('drag:start', this[onDragStart]).off('drag:over:container', this[onDragOverContainer]).off('drag:over', this[onDragOver]).off('drag:stop', this[onDragStop]);
+  }
+
+  /**
+   * Returns true index of element within its container during drag operation, i.e. excluding mirror and original source
+   * @param {HTMLElement} element - An element
+   * @return {Number}
+   */
+  index(element) {
+    return this.getDraggableElementsForContainer(element.parentNode).indexOf(element);
+  }
+
+  /**
+   * Drag start handler
+   * @private
+   * @param {DragStartEvent} event - Drag start event
+   */
+  [onDragStart](event) {
+    this.startContainer = event.source.parentNode;
+    this.startIndex = this.index(event.source);
+
+    const sortableStartEvent = new _SortableEvent.SortableStartEvent({
+      dragEvent: event,
+      startIndex: this.startIndex,
+      startContainer: this.startContainer
+    });
+
+    this.trigger(sortableStartEvent);
+
+    if (sortableStartEvent.canceled()) {
+      event.cancel();
+    }
+  }
+
+  /**
+   * Drag over container handler
+   * @private
+   * @param {DragOverContainerEvent} event - Drag over container event
+   */
+  [onDragOverContainer](event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    const { source, over, overContainer } = event;
+    const oldIndex = this.index(source);
+
+    const sortableSortEvent = new _SortableEvent.SortableSortEvent({
+      dragEvent: event,
+      currentIndex: oldIndex,
+      source,
+      over
+    });
+
+    this.trigger(sortableSortEvent);
+
+    if (sortableSortEvent.canceled()) {
+      return;
+    }
+
+    const children = this.getDraggableElementsForContainer(overContainer);
+    const moves = move({ source, over, overContainer, children });
+
+    if (!moves) {
+      return;
+    }
+
+    const { oldContainer, newContainer } = moves;
+    const newIndex = this.index(event.source);
+
+    const sortableSortedEvent = new _SortableEvent.SortableSortedEvent({
+      dragEvent: event,
+      oldIndex,
+      newIndex,
+      oldContainer,
+      newContainer
+    });
+
+    this.trigger(sortableSortedEvent);
+  }
+
+  /**
+   * Drag over handler
+   * @private
+   * @param {DragOverEvent} event - Drag over event
+   */
+  [onDragOver](event) {
+    if (event.over === event.originalSource || event.over === event.source) {
+      return;
+    }
+
+    const { source, over, overContainer } = event;
+    const oldIndex = this.index(source);
+
+    const sortableSortEvent = new _SortableEvent.SortableSortEvent({
+      dragEvent: event,
+      currentIndex: oldIndex,
+      source,
+      over
+    });
+
+    this.trigger(sortableSortEvent);
+
+    if (sortableSortEvent.canceled()) {
+      return;
+    }
+
+    const children = this.getDraggableElementsForContainer(overContainer);
+    const moves = move({ source, over, overContainer, children });
+
+    if (!moves) {
+      return;
+    }
+
+    const { oldContainer, newContainer } = moves;
+    const newIndex = this.index(source);
+
+    const sortableSortedEvent = new _SortableEvent.SortableSortedEvent({
+      dragEvent: event,
+      oldIndex,
+      newIndex,
+      oldContainer,
+      newContainer
+    });
+
+    this.trigger(sortableSortedEvent);
+  }
+
+  /**
+   * Drag stop handler
+   * @private
+   * @param {DragStopEvent} event - Drag stop event
+   */
+  [onDragStop](event) {
+    const sortableStopEvent = new _SortableEvent.SortableStopEvent({
+      dragEvent: event,
+      oldIndex: this.startIndex,
+      newIndex: this.index(event.source),
+      oldContainer: this.startContainer,
+      newContainer: event.source.parentNode
+    });
+
+    this.trigger(sortableStopEvent);
+
+    this.startIndex = null;
+    this.startContainer = null;
+  }
+}
+
+exports.default = Sortable;
+function index(element) {
+  return Array.prototype.indexOf.call(element.parentNode.children, element);
+}
+
+function move({ source, over, overContainer, children }) {
+  const emptyOverContainer = !children.length;
+  const differentContainer = source.parentNode !== overContainer;
+  const sameContainer = over && !differentContainer;
+
+  if (emptyOverContainer) {
+    return moveInsideEmptyContainer(source, overContainer);
+  } else if (sameContainer) {
+    return moveWithinContainer(source, over);
+  } else if (differentContainer) {
+    return moveOutsideContainer(source, over, overContainer);
+  } else {
+    return null;
+  }
+}
+
+function moveInsideEmptyContainer(source, overContainer) {
+  const oldContainer = source.parentNode;
+
+  overContainer.appendChild(source);
+
+  return { oldContainer, newContainer: overContainer };
+}
+
+function moveWithinContainer(source, over) {
+  const oldIndex = index(source);
+  const newIndex = index(over);
+
+  if (oldIndex < newIndex) {
+    source.parentNode.insertBefore(source, over.nextElementSibling);
+  } else {
+    source.parentNode.insertBefore(source, over);
+  }
+
+  return { oldContainer: source.parentNode, newContainer: source.parentNode };
+}
+
+function moveOutsideContainer(source, over, overContainer) {
+  const oldContainer = source.parentNode;
+
+  if (over) {
+    over.parentNode.insertBefore(source, over);
+  } else {
+    // need to figure out proper position
+    overContainer.appendChild(source);
+  }
+
+  return { oldContainer, newContainer: source.parentNode };
+}
+
+/***/ }),
+/* 27 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortableStopEvent = exports.SortableSortedEvent = exports.SortableSortEvent = exports.SortableStartEvent = exports.SortableEvent = undefined;
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Base sortable event
+ * @class SortableEvent
+ * @module SortableEvent
+ * @extends AbstractEvent
+ */
+class SortableEvent extends _AbstractEvent2.default {
+
+  /**
+   * Original drag event that triggered this sortable event
+   * @property dragEvent
+   * @type {DragEvent}
+   * @readonly
+   */
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+}
+
+exports.SortableEvent = SortableEvent; /**
+                                        * Sortable start event
+                                        * @class SortableStartEvent
+                                        * @module SortableStartEvent
+                                        * @extends SortableEvent
+                                        */
+
+SortableEvent.type = 'sortable';
+class SortableStartEvent extends SortableEvent {
+
+  /**
+   * Start index of source on sortable start
+   * @property startIndex
+   * @type {Number}
+   * @readonly
+   */
+  get startIndex() {
+    return this.data.startIndex;
+  }
+
+  /**
+   * Start container on sortable start
+   * @property startContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get startContainer() {
+    return this.data.startContainer;
+  }
+}
+
+exports.SortableStartEvent = SortableStartEvent; /**
+                                                  * Sortable sort event
+                                                  * @class SortableSortEvent
+                                                  * @module SortableSortEvent
+                                                  * @extends SortableEvent
+                                                  */
+
+SortableStartEvent.type = 'sortable:start';
+SortableStartEvent.cancelable = true;
+class SortableSortEvent extends SortableEvent {
+
+  /**
+   * Index of current draggable element
+   * @property currentIndex
+   * @type {Number}
+   * @readonly
+   */
+  get currentIndex() {
+    return this.data.currentIndex;
+  }
+
+  /**
+   * Draggable element you are hovering over
+   * @property over
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get over() {
+    return this.data.oldIndex;
+  }
+
+  /**
+   * Draggable container element you are hovering over
+   * @property overContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get overContainer() {
+    return this.data.newIndex;
+  }
+}
+
+exports.SortableSortEvent = SortableSortEvent; /**
+                                                * Sortable sorted event
+                                                * @class SortableSortedEvent
+                                                * @module SortableSortedEvent
+                                                * @extends SortableEvent
+                                                */
+
+SortableSortEvent.type = 'sortable:sort';
+SortableSortEvent.cancelable = true;
+class SortableSortedEvent extends SortableEvent {
+
+  /**
+   * Index of last sorted event
+   * @property oldIndex
+   * @type {Number}
+   * @readonly
+   */
+  get oldIndex() {
+    return this.data.oldIndex;
+  }
+
+  /**
+   * New index of this sorted event
+   * @property newIndex
+   * @type {Number}
+   * @readonly
+   */
+  get newIndex() {
+    return this.data.newIndex;
+  }
+
+  /**
+   * Old container of draggable element
+   * @property oldContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get oldContainer() {
+    return this.data.oldContainer;
+  }
+
+  /**
+   * New container of draggable element
+   * @property newContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get newContainer() {
+    return this.data.newContainer;
+  }
+}
+
+exports.SortableSortedEvent = SortableSortedEvent; /**
+                                                    * Sortable stop event
+                                                    * @class SortableStopEvent
+                                                    * @module SortableStopEvent
+                                                    * @extends SortableEvent
+                                                    */
+
+SortableSortedEvent.type = 'sortable:sorted';
+class SortableStopEvent extends SortableEvent {
+
+  /**
+   * Original index on sortable start
+   * @property oldIndex
+   * @type {Number}
+   * @readonly
+   */
+  get oldIndex() {
+    return this.data.oldIndex;
+  }
+
+  /**
+   * New index of draggable element
+   * @property newIndex
+   * @type {Number}
+   * @readonly
+   */
+  get newIndex() {
+    return this.data.newIndex;
+  }
+
+  /**
+   * Original container of draggable element
+   * @property oldContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get oldContainer() {
+    return this.data.oldContainer;
+  }
+
+  /**
+   * New container of draggable element
+   * @property newContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get newContainer() {
+    return this.data.newContainer;
+  }
+}
+exports.SortableStopEvent = SortableStopEvent;
+SortableStopEvent.type = 'sortable:stop';
+
+/***/ }),
+/* 28 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _SortableEvent = __webpack_require__(9);
+
+Object.keys(_SortableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SortableEvent[key];
+    }
+  });
+});
+
+var _Sortable = __webpack_require__(26);
+
+var _Sortable2 = _interopRequireDefault(_Sortable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Sortable2.default;
+
+/***/ }),
+/* 29 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _Draggable = __webpack_require__(5);
+
+var _Draggable2 = _interopRequireDefault(_Draggable);
+
+var _SwappableEvent = __webpack_require__(10);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onDragStart = Symbol('onDragStart');
+const onDragOver = Symbol('onDragOver');
+const onDragStop = Symbol('onDragStop');
+
+/**
+ * Returns an announcement message when the Draggable element is swapped with another draggable element
+ * @param {SwappableSwappedEvent} swappableEvent
+ * @return {String}
+ */
+function onSwappableSwappedDefaultAnnouncement({ dragEvent, swappedElement }) {
+  const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'swappable element';
+  const overText = swappedElement.textContent.trim() || swappedElement.id || 'swappable element';
+
+  return `Swapped ${sourceText} with ${overText}`;
+}
+
+/**
+ * @const {Object} defaultAnnouncements
+ * @const {Function} defaultAnnouncements['swappabled:swapped']
+ */
+const defaultAnnouncements = {
+  'swappabled:swapped': onSwappableSwappedDefaultAnnouncement
+};
+
+/**
+ * Swappable is built on top of Draggable and allows swapping of draggable elements.
+ * Order is irrelevant to Swappable.
+ * @class Swappable
+ * @module Swappable
+ * @extends Draggable
+ */
+class Swappable extends _Draggable2.default {
+  /**
+   * Swappable constructor.
+   * @constructs Swappable
+   * @param {HTMLElement[]|NodeList|HTMLElement} containers - Swappable containers
+   * @param {Object} options - Options for Swappable
+   */
+  constructor(containers = [], options = {}) {
+    super(containers, _extends({}, options, {
+      announcements: _extends({}, defaultAnnouncements, options.announcements || {})
+    }));
+
+    /**
+     * Last draggable element that was dragged over
+     * @property lastOver
+     * @type {HTMLElement}
+     */
+    this.lastOver = null;
+
+    this[onDragStart] = this[onDragStart].bind(this);
+    this[onDragOver] = this[onDragOver].bind(this);
+    this[onDragStop] = this[onDragStop].bind(this);
+
+    this.on('drag:start', this[onDragStart]).on('drag:over', this[onDragOver]).on('drag:stop', this[onDragStop]);
+  }
+
+  /**
+   * Destroys Swappable instance.
+   */
+  destroy() {
+    super.destroy();
+
+    this.off('drag:start', this._onDragStart).off('drag:over', this._onDragOver).off('drag:stop', this._onDragStop);
+  }
+
+  /**
+   * Drag start handler
+   * @private
+   * @param {DragStartEvent} event - Drag start event
+   */
+  [onDragStart](event) {
+    const swappableStartEvent = new _SwappableEvent.SwappableStartEvent({
+      dragEvent: event
+    });
+
+    this.trigger(swappableStartEvent);
+
+    if (swappableStartEvent.canceled()) {
+      event.cancel();
+    }
+  }
+
+  /**
+   * Drag over handler
+   * @private
+   * @param {DragOverEvent} event - Drag over event
+   */
+  [onDragOver](event) {
+    if (event.over === event.originalSource || event.over === event.source || event.canceled()) {
+      return;
+    }
+
+    const swappableSwapEvent = new _SwappableEvent.SwappableSwapEvent({
+      dragEvent: event,
+      over: event.over,
+      overContainer: event.overContainer
+    });
+
+    this.trigger(swappableSwapEvent);
+
+    if (swappableSwapEvent.canceled()) {
+      return;
+    }
+
+    // swap originally swapped element back
+    if (this.lastOver && this.lastOver !== event.over) {
+      swap(this.lastOver, event.source);
+    }
+
+    if (this.lastOver === event.over) {
+      this.lastOver = null;
+    } else {
+      this.lastOver = event.over;
+    }
+
+    swap(event.source, event.over);
+
+    const swappableSwappedEvent = new _SwappableEvent.SwappableSwappedEvent({
+      dragEvent: event,
+      swappedElement: event.over
+    });
+
+    this.trigger(swappableSwappedEvent);
+  }
+
+  /**
+   * Drag stop handler
+   * @private
+   * @param {DragStopEvent} event - Drag stop event
+   */
+  [onDragStop](event) {
+    const swappableStopEvent = new _SwappableEvent.SwappableStopEvent({
+      dragEvent: event
+    });
+
+    this.trigger(swappableStopEvent);
+    this.lastOver = null;
+  }
+}
+
+exports.default = Swappable;
+function withTempElement(callback) {
+  const tmpElement = document.createElement('div');
+  callback(tmpElement);
+  tmpElement.parentNode.removeChild(tmpElement);
+}
+
+function swap(source, over) {
+  const overParent = over.parentNode;
+  const sourceParent = source.parentNode;
+
+  withTempElement(tmpElement => {
+    sourceParent.insertBefore(tmpElement, source);
+    overParent.insertBefore(source, over);
+    sourceParent.insertBefore(over, tmpElement);
+  });
+}
+
+/***/ }),
+/* 30 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SwappableStopEvent = exports.SwappableSwappedEvent = exports.SwappableSwapEvent = exports.SwappableStartEvent = exports.SwappableEvent = undefined;
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Base swappable event
+ * @class SwappableEvent
+ * @module SwappableEvent
+ * @extends AbstractEvent
+ */
+class SwappableEvent extends _AbstractEvent2.default {
+
+  /**
+   * Original drag event that triggered this swappable event
+   * @property dragEvent
+   * @type {DragEvent}
+   * @readonly
+   */
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+}
+
+exports.SwappableEvent = SwappableEvent; /**
+                                          * Swappable start event
+                                          * @class SwappableStartEvent
+                                          * @module SwappableStartEvent
+                                          * @extends SwappableEvent
+                                          */
+
+SwappableEvent.type = 'swappable';
+class SwappableStartEvent extends SwappableEvent {}
+
+exports.SwappableStartEvent = SwappableStartEvent; /**
+                                                    * Swappable swap event
+                                                    * @class SwappableSwapEvent
+                                                    * @module SwappableSwapEvent
+                                                    * @extends SwappableEvent
+                                                    */
+
+SwappableStartEvent.type = 'swappable:start';
+SwappableStartEvent.cancelable = true;
+class SwappableSwapEvent extends SwappableEvent {
+
+  /**
+   * Draggable element you are over
+   * @property over
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get over() {
+    return this.data.over;
+  }
+
+  /**
+   * Draggable container you are over
+   * @property overContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get overContainer() {
+    return this.data.overContainer;
+  }
+}
+
+exports.SwappableSwapEvent = SwappableSwapEvent; /**
+                                                  * Swappable swapped event
+                                                  * @class SwappableSwappedEvent
+                                                  * @module SwappableSwappedEvent
+                                                  * @extends SwappableEvent
+                                                  */
+
+SwappableSwapEvent.type = 'swappable:swap';
+SwappableSwapEvent.cancelable = true;
+class SwappableSwappedEvent extends SwappableEvent {
+
+  /**
+   * The draggable element that you swapped with
+   * @property swappedElement
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get swappedElement() {
+    return this.data.swappedElement;
+  }
+}
+
+exports.SwappableSwappedEvent = SwappableSwappedEvent; /**
+                                                        * Swappable stop event
+                                                        * @class SwappableStopEvent
+                                                        * @module SwappableStopEvent
+                                                        * @extends SwappableEvent
+                                                        */
+
+SwappableSwappedEvent.type = 'swappable:swapped';
+class SwappableStopEvent extends SwappableEvent {}
+exports.SwappableStopEvent = SwappableStopEvent;
+SwappableStopEvent.type = 'swappable:stop';
+
+/***/ }),
+/* 31 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _SwappableEvent = __webpack_require__(10);
+
+Object.keys(_SwappableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SwappableEvent[key];
+    }
+  });
+});
+
+var _Swappable = __webpack_require__(29);
+
+var _Swappable2 = _interopRequireDefault(_Swappable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Swappable2.default;
+
+/***/ }),
+/* 32 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _utils = __webpack_require__(2);
+
+var _Draggable = __webpack_require__(5);
+
+var _Draggable2 = _interopRequireDefault(_Draggable);
+
+var _DroppableEvent = __webpack_require__(11);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onDragStart = Symbol('onDragStart');
+const onDragMove = Symbol('onDragMove');
+const onDragStop = Symbol('onDragStop');
+const dropInDropzone = Symbol('dropInDropZone');
+const returnToOriginalDropzone = Symbol('returnToOriginalDropzone');
+const closestDropzone = Symbol('closestDropzone');
+const getDropzones = Symbol('getDropzones');
+
+/**
+ * Returns an announcement message when the Draggable element is dropped into a dropzone element
+ * @param {DroppableDroppedEvent} droppableEvent
+ * @return {String}
+ */
+function onDroppableDroppedDefaultAnnouncement({ dragEvent, dropzone }) {
+  const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'draggable element';
+  const dropzoneText = dropzone.textContent.trim() || dropzone.id || 'droppable element';
+
+  return `Dropped ${sourceText} into ${dropzoneText}`;
+}
+
+/**
+ * Returns an announcement message when the Draggable element has returned to its original dropzone element
+ * @param {DroppableReturnedEvent} droppableEvent
+ * @return {String}
+ */
+function onDroppableReturnedDefaultAnnouncement({ dragEvent, dropzone }) {
+  const sourceText = dragEvent.source.textContent.trim() || dragEvent.source.id || 'draggable element';
+  const dropzoneText = dropzone.textContent.trim() || dropzone.id || 'droppable element';
+
+  return `Returned ${sourceText} from ${dropzoneText}`;
+}
+
+/**
+ * @const {Object} defaultAnnouncements
+ * @const {Function} defaultAnnouncements['droppable:dropped']
+ * @const {Function} defaultAnnouncements['droppable:returned']
+ */
+const defaultAnnouncements = {
+  'droppable:dropped': onDroppableDroppedDefaultAnnouncement,
+  'droppable:returned': onDroppableReturnedDefaultAnnouncement
+};
+
+const defaultClasses = {
+  'droppable:active': 'draggable-dropzone--active',
+  'droppable:occupied': 'draggable-dropzone--occupied'
+};
+
+const defaultOptions = {
+  dropzone: '.draggable-droppable'
+};
+
+/**
+ * Droppable is built on top of Draggable and allows dropping draggable elements
+ * into dropzone element
+ * @class Droppable
+ * @module Droppable
+ * @extends Draggable
+ */
+class Droppable extends _Draggable2.default {
+  /**
+   * Droppable constructor.
+   * @constructs Droppable
+   * @param {HTMLElement[]|NodeList|HTMLElement} containers - Droppable containers
+   * @param {Object} options - Options for Droppable
+   */
+  constructor(containers = [], options = {}) {
+    super(containers, _extends({}, defaultOptions, options, {
+      classes: _extends({}, defaultClasses, options.classes || {}),
+      announcements: _extends({}, defaultAnnouncements, options.announcements || {})
+    }));
+
+    /**
+     * All dropzone elements on drag start
+     * @property dropzones
+     * @type {HTMLElement[]}
+     */
+    this.dropzones = null;
+
+    /**
+     * Last dropzone element that the source was dropped into
+     * @property lastDropzone
+     * @type {HTMLElement}
+     */
+    this.lastDropzone = null;
+
+    /**
+     * Initial dropzone element that the source was drag from
+     * @property initialDropzone
+     * @type {HTMLElement}
+     */
+    this.initialDropzone = null;
+
+    this[onDragStart] = this[onDragStart].bind(this);
+    this[onDragMove] = this[onDragMove].bind(this);
+    this[onDragStop] = this[onDragStop].bind(this);
+
+    this.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
+  }
+
+  /**
+   * Destroys Droppable instance.
+   */
+  destroy() {
+    super.destroy();
+
+    this.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
+  }
+
+  /**
+   * Drag start handler
+   * @private
+   * @param {DragStartEvent} event - Drag start event
+   */
+  [onDragStart](event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    this.dropzones = [...this[getDropzones]()];
+    const dropzone = (0, _utils.closest)(event.sensorEvent.target, this.options.dropzone);
+
+    if (!dropzone) {
+      event.cancel();
+      return;
+    }
+
+    const droppableStartEvent = new _DroppableEvent.DroppableStartEvent({
+      dragEvent: event,
+      dropzone
+    });
+
+    this.trigger(droppableStartEvent);
+
+    if (droppableStartEvent.canceled()) {
+      event.cancel();
+      return;
+    }
+
+    this.initialDropzone = dropzone;
+
+    for (const dropzoneElement of this.dropzones) {
+      if (dropzoneElement.classList.contains(this.getClassNameFor('droppable:occupied'))) {
+        continue;
+      }
+
+      dropzoneElement.classList.add(this.getClassNameFor('droppable:active'));
+    }
+  }
+
+  /**
+   * Drag move handler
+   * @private
+   * @param {DragMoveEvent} event - Drag move event
+   */
+  [onDragMove](event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    const dropzone = this[closestDropzone](event.sensorEvent.target);
+    const overEmptyDropzone = dropzone && !dropzone.classList.contains(this.getClassNameFor('droppable:occupied'));
+
+    if (overEmptyDropzone && this[dropInDropzone](event, dropzone)) {
+      this.lastDropzone = dropzone;
+    } else if ((!dropzone || dropzone === this.initialDropzone) && this.lastDropzone) {
+      this[returnToOriginalDropzone](event);
+      this.lastDropzone = null;
+    }
+  }
+
+  /**
+   * Drag stop handler
+   * @private
+   * @param {DragStopEvent} event - Drag stop event
+   */
+  [onDragStop](event) {
+    const droppableStopEvent = new _DroppableEvent.DroppableStopEvent({
+      dragEvent: event,
+      dropzone: this.lastDropzone || this.initialDropzone
+    });
+
+    this.trigger(droppableStopEvent);
+
+    const occupiedClass = this.getClassNameFor('droppable:occupied');
+
+    for (const dropzone of this.dropzones) {
+      dropzone.classList.remove(this.getClassNameFor('droppable:active'));
+    }
+
+    if (this.lastDropzone && this.lastDropzone !== this.initialDropzone) {
+      this.initialDropzone.classList.remove(occupiedClass);
+    }
+
+    this.dropzones = null;
+    this.lastDropzone = null;
+    this.initialDropzone = null;
+  }
+
+  /**
+   * Drops a draggable element into a dropzone element
+   * @private
+   * @param {DragMoveEvent} event - Drag move event
+   * @param {HTMLElement} dropzone - Dropzone element to drop draggable into
+   */
+  [dropInDropzone](event, dropzone) {
+    const droppableDroppedEvent = new _DroppableEvent.DroppableDroppedEvent({
+      dragEvent: event,
+      dropzone
+    });
+
+    this.trigger(droppableDroppedEvent);
+
+    if (droppableDroppedEvent.canceled()) {
+      return false;
+    }
+
+    const occupiedClass = this.getClassNameFor('droppable:occupied');
+
+    if (this.lastDropzone) {
+      this.lastDropzone.classList.remove(occupiedClass);
+    }
+
+    dropzone.appendChild(event.source);
+    dropzone.classList.add(occupiedClass);
+
+    return true;
+  }
+
+  /**
+   * Moves the previously dropped element back into its original dropzone
+   * @private
+   * @param {DragMoveEvent} event - Drag move event
+   */
+  [returnToOriginalDropzone](event) {
+    const droppableReturnedEvent = new _DroppableEvent.DroppableReturnedEvent({
+      dragEvent: event,
+      dropzone: this.lastDropzone
+    });
+
+    this.trigger(droppableReturnedEvent);
+
+    if (droppableReturnedEvent.canceled()) {
+      return;
+    }
+
+    this.initialDropzone.appendChild(event.source);
+    this.lastDropzone.classList.remove(this.getClassNameFor('droppable:occupied'));
+  }
+
+  /**
+   * Returns closest dropzone element for even target
+   * @private
+   * @param {HTMLElement} target - Event target
+   * @return {HTMLElement|null}
+   */
+  [closestDropzone](target) {
+    if (!this.dropzones) {
+      return null;
+    }
+
+    return (0, _utils.closest)(target, this.dropzones);
+  }
+
+  /**
+   * Returns all current dropzone elements for this draggable instance
+   * @private
+   * @return {NodeList|HTMLElement[]|Array}
+   */
+  [getDropzones]() {
+    const dropzone = this.options.dropzone;
+
+    if (typeof dropzone === 'string') {
+      return document.querySelectorAll(dropzone);
+    } else if (dropzone instanceof NodeList || dropzone instanceof Array) {
+      return dropzone;
+    } else if (typeof dropzone === 'function') {
+      return dropzone();
+    } else {
+      return [];
+    }
+  }
+}
+exports.default = Droppable;
+
+/***/ }),
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DroppableStopEvent = exports.DroppableReturnedEvent = exports.DroppableDroppedEvent = exports.DroppableStartEvent = exports.DroppableEvent = undefined;
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Base droppable event
+ * @class DroppableEvent
+ * @module DroppableEvent
+ * @extends AbstractEvent
+ */
+class DroppableEvent extends _AbstractEvent2.default {
+
+  /**
+   * Original drag event that triggered this droppable event
+   * @property dragEvent
+   * @type {DragEvent}
+   * @readonly
+   */
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+}
+
+exports.DroppableEvent = DroppableEvent; /**
+                                          * Droppable start event
+                                          * @class DroppableStartEvent
+                                          * @module DroppableStartEvent
+                                          * @extends DroppableEvent
+                                          */
+
+DroppableEvent.type = 'droppable';
+class DroppableStartEvent extends DroppableEvent {
+
+  /**
+   * The initial dropzone element of the currently dragging draggable element
+   * @property dropzone
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get dropzone() {
+    return this.data.dropzone;
+  }
+}
+
+exports.DroppableStartEvent = DroppableStartEvent; /**
+                                                    * Droppable dropped event
+                                                    * @class DroppableDroppedEvent
+                                                    * @module DroppableDroppedEvent
+                                                    * @extends DroppableEvent
+                                                    */
+
+DroppableStartEvent.type = 'droppable:start';
+DroppableStartEvent.cancelable = true;
+class DroppableDroppedEvent extends DroppableEvent {
+
+  /**
+   * The dropzone element you dropped the draggable element into
+   * @property dropzone
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get dropzone() {
+    return this.data.dropzone;
+  }
+}
+
+exports.DroppableDroppedEvent = DroppableDroppedEvent; /**
+                                                        * Droppable returned event
+                                                        * @class DroppableReturnedEvent
+                                                        * @module DroppableReturnedEvent
+                                                        * @extends DroppableEvent
+                                                        */
+
+DroppableDroppedEvent.type = 'droppable:dropped';
+DroppableDroppedEvent.cancelable = true;
+class DroppableReturnedEvent extends DroppableEvent {
+
+  /**
+   * The dropzone element you dragged away from
+   * @property dropzone
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get dropzone() {
+    return this.data.dropzone;
+  }
+}
+
+exports.DroppableReturnedEvent = DroppableReturnedEvent; /**
+                                                          * Droppable stop event
+                                                          * @class DroppableStopEvent
+                                                          * @module DroppableStopEvent
+                                                          * @extends DroppableEvent
+                                                          */
+
+DroppableReturnedEvent.type = 'droppable:returned';
+DroppableReturnedEvent.cancelable = true;
+class DroppableStopEvent extends DroppableEvent {
+
+  /**
+   * The final dropzone element of the draggable element
+   * @property dropzone
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get dropzone() {
+    return this.data.dropzone;
+  }
+}
+exports.DroppableStopEvent = DroppableStopEvent;
+DroppableStopEvent.type = 'droppable:stop';
+DroppableStopEvent.cancelable = true;
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DroppableEvent = __webpack_require__(11);
+
+Object.keys(_DroppableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DroppableEvent[key];
+    }
+  });
+});
+
+var _Droppable = __webpack_require__(32);
+
+var _Droppable2 = _interopRequireDefault(_Droppable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Droppable2.default;
+
+/***/ }),
+/* 35 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/**
+ * The Emitter is a simple emitter class that provides you with `on()`, `off()` and `trigger()` methods
+ * @class Emitter
+ * @module Emitter
+ */
+class Emitter {
+  constructor() {
+    this.callbacks = {};
+  }
+
+  /**
+   * Registers callbacks by event name
+   * @param {String} type
+   * @param {...Function} callbacks
+   */
+  on(type, ...callbacks) {
+    if (!this.callbacks[type]) {
+      this.callbacks[type] = [];
+    }
+
+    this.callbacks[type].push(...callbacks);
+
+    return this;
+  }
+
+  /**
+   * Unregisters callbacks by event name
+   * @param {String} type
+   * @param {Function} callback
+   */
+  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;
+  }
+
+  /**
+   * Triggers event callbacks by event object
+   * @param {AbstractEvent} event
+   */
+  trigger(event) {
+    if (!this.callbacks[event.type]) {
+      return null;
+    }
+
+    const callbacks = [...this.callbacks[event.type]];
+    const caughtErrors = [];
+
+    for (let i = callbacks.length - 1; i >= 0; i--) {
+      const callback = callbacks[i];
+
+      try {
+        callback(event);
+      } catch (error) {
+        caughtErrors.push(error);
+      }
+    }
+
+    if (caughtErrors.length) {
+      /* eslint-disable no-console */
+      console.error(`Draggable caught errors while triggering '${event.type}'`, caughtErrors);
+      /* eslint-disable no-console */
+    }
+
+    return this;
+  }
+}
+exports.default = Emitter;
+
+/***/ }),
+/* 36 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Emitter = __webpack_require__(35);
+
+var _Emitter2 = _interopRequireDefault(_Emitter);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Emitter2.default;
+
+/***/ }),
+/* 37 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _utils = __webpack_require__(2);
+
+var _Plugins = __webpack_require__(12);
+
+var _Emitter = __webpack_require__(36);
+
+var _Emitter2 = _interopRequireDefault(_Emitter);
+
+var _Sensors = __webpack_require__(6);
+
+var _DraggableEvent = __webpack_require__(13);
+
+var _DragEvent = __webpack_require__(14);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onDragStart = Symbol('onDragStart');
+const onDragMove = Symbol('onDragMove');
+const onDragStop = Symbol('onDragStop');
+const onDragPressure = Symbol('onDragPressure');
+
+/**
+ * @const {Object} defaultAnnouncements
+ * @const {Function} defaultAnnouncements['drag:start']
+ * @const {Function} defaultAnnouncements['drag:stop']
+ */
+const defaultAnnouncements = {
+  'drag:start': event => `Picked up ${event.source.textContent.trim() || event.source.id || 'draggable element'}`,
+  'drag:stop': event => `Released ${event.source.textContent.trim() || event.source.id || 'draggable element'}`
+};
+
+const defaultClasses = {
+  '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',
+  'source:original': 'draggable--original',
+  mirror: 'draggable-mirror'
+};
+
+const defaultOptions = exports.defaultOptions = {
+  draggable: '.draggable-source',
+  handle: null,
+  delay: 100,
+  placedTimeout: 800,
+  plugins: [],
+  sensors: []
+};
+
+/**
+ * This is the core draggable library that does the heavy lifting
+ * @class Draggable
+ * @module Draggable
+ */
+class Draggable {
+
+  /**
+   * Draggable constructor.
+   * @constructs Draggable
+   * @param {HTMLElement[]|NodeList|HTMLElement} containers - Draggable containers
+   * @param {Object} options - Options for draggable
+   */
+  constructor(containers = [document.body], options = {}) {
+    /**
+     * Draggable containers
+     * @property containers
+     * @type {HTMLElement[]}
+     */
+    if (containers instanceof NodeList || containers instanceof Array) {
+      this.containers = [...containers];
+    } else if (containers instanceof HTMLElement) {
+      this.containers = [containers];
+    } else {
+      throw new Error('Draggable containers are expected to be of type `NodeList`, `HTMLElement[]` or `HTMLElement`');
+    }
+
+    this.options = _extends({}, defaultOptions, options, {
+      classes: _extends({}, defaultClasses, options.classes || {}),
+      announcements: _extends({}, defaultAnnouncements, options.announcements || {})
+    });
+
+    /**
+     * Draggables event emitter
+     * @property emitter
+     * @type {Emitter}
+     */
+    this.emitter = new _Emitter2.default();
+
+    /**
+     * Current drag state
+     * @property dragging
+     * @type {Boolean}
+     */
+    this.dragging = false;
+
+    /**
+     * Active plugins
+     * @property plugins
+     * @type {Plugin[]}
+     */
+    this.plugins = [];
+
+    /**
+     * Active sensors
+     * @property sensors
+     * @type {Sensor[]}
+     */
+    this.sensors = [];
+
+    this[onDragStart] = this[onDragStart].bind(this);
+    this[onDragMove] = this[onDragMove].bind(this);
+    this[onDragStop] = this[onDragStop].bind(this);
+    this[onDragPressure] = this[onDragPressure].bind(this);
+
+    document.addEventListener('drag:start', this[onDragStart], true);
+    document.addEventListener('drag:move', this[onDragMove], true);
+    document.addEventListener('drag:stop', this[onDragStop], true);
+    document.addEventListener('drag:pressure', this[onDragPressure], true);
+
+    const defaultPlugins = Object.values(Draggable.Plugins).map(Plugin => Plugin);
+    const defaultSensors = [_Sensors.MouseSensor, _Sensors.TouchSensor];
+
+    this.addPlugin(...[...defaultPlugins, ...this.options.plugins]);
+    this.addSensor(...[...defaultSensors, ...this.options.sensors]);
+
+    const draggableInitializedEvent = new _DraggableEvent.DraggableInitializedEvent({
+      draggable: this
+    });
+
+    this.on('mirror:created', ({ mirror }) => this.mirror = mirror);
+    this.on('mirror:destroy', () => this.mirror = null);
+
+    this.trigger(draggableInitializedEvent);
+  }
+
+  /**
+   * Destroys Draggable instance. This removes all internal event listeners and
+   * deactivates sensors and plugins
+   */
+
+  /**
+   * Default plugins draggable uses
+   * @static
+   * @property {Object} Plugins
+   * @property {Announcement} Plugins.Announcement
+   * @property {Focusable} Plugins.Focusable
+   * @property {Mirror} Plugins.Mirror
+   * @property {Scrollable} Plugins.Scrollable
+   * @type {Object}
+   */
+  destroy() {
+    document.removeEventListener('drag:start', this[onDragStart], true);
+    document.removeEventListener('drag:move', this[onDragMove], true);
+    document.removeEventListener('drag:stop', this[onDragStop], true);
+    document.removeEventListener('drag:pressure', this[onDragPressure], true);
+
+    const draggableDestroyEvent = new _DraggableEvent.DraggableDestroyEvent({
+      draggable: this
+    });
+
+    this.trigger(draggableDestroyEvent);
+
+    this.removePlugin(...this.plugins.map(plugin => plugin.constructor));
+    this.removeSensor(...this.sensors.map(sensor => sensor.constructor));
+  }
+
+  /**
+   * Adds plugin to this draggable instance. This will end up calling the attach method of the plugin
+   * @param {...typeof Plugin} plugins - Plugins that you want attached to draggable
+   * @return {Draggable}
+   * @example draggable.addPlugin(CustomA11yPlugin, CustomMirrorPlugin)
+   */
+  addPlugin(...plugins) {
+    const activePlugins = plugins.map(Plugin => new Plugin(this));
+
+    activePlugins.forEach(plugin => plugin.attach());
+    this.plugins = [...this.plugins, ...activePlugins];
+
+    return this;
+  }
+
+  /**
+   * Removes plugins that are already attached to this draggable instance. This will end up calling
+   * the detach method of the plugin
+   * @param {...typeof Plugin} plugins - Plugins that you want detached from draggable
+   * @return {Draggable}
+   * @example draggable.removePlugin(MirrorPlugin, CustomMirrorPlugin)
+   */
+  removePlugin(...plugins) {
+    const removedPlugins = this.plugins.filter(plugin => plugins.includes(plugin.constructor));
+
+    removedPlugins.forEach(plugin => plugin.detach());
+    this.plugins = this.plugins.filter(plugin => !plugins.includes(plugin.constructor));
+
+    return this;
+  }
+
+  /**
+   * Adds sensors to this draggable instance. This will end up calling the attach method of the sensor
+   * @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
+   * @return {Draggable}
+   * @example draggable.addSensor(ForceTouchSensor, CustomSensor)
+   */
+  addSensor(...sensors) {
+    const activeSensors = sensors.map(Sensor => new Sensor(this.containers, this.options));
+
+    activeSensors.forEach(sensor => sensor.attach());
+    this.sensors = [...this.sensors, ...activeSensors];
+
+    return this;
+  }
+
+  /**
+   * Removes sensors that are already attached to this draggable instance. This will end up calling
+   * the detach method of the sensor
+   * @param {...typeof Sensor} sensors - Sensors that you want attached to draggable
+   * @return {Draggable}
+   * @example draggable.removeSensor(TouchSensor, DragSensor)
+   */
+  removeSensor(...sensors) {
+    const removedSensors = this.sensors.filter(sensor => sensors.includes(sensor.constructor));
+
+    removedSensors.forEach(sensor => sensor.detach());
+    this.sensors = this.sensors.filter(sensor => !sensors.includes(sensor.constructor));
+
+    return this;
+  }
+
+  /**
+   * Adds container to this draggable instance
+   * @param {...HTMLElement} containers - Containers you want to add to draggable
+   * @return {Draggable}
+   * @example draggable.addContainer(document.body)
+   */
+  addContainer(...containers) {
+    this.containers = [...this.containers, ...containers];
+    this.sensors.forEach(sensor => sensor.addContainer(...containers));
+    return this;
+  }
+
+  /**
+   * Removes container from this draggable instance
+   * @param {...HTMLElement} containers - Containers you want to remove from draggable
+   * @return {Draggable}
+   * @example draggable.removeContainer(document.body)
+   */
+  removeContainer(...containers) {
+    this.containers = this.containers.filter(container => !containers.includes(container));
+    this.sensors.forEach(sensor => sensor.removeContainer(...containers));
+    return this;
+  }
+
+  /**
+   * Adds listener for draggable events
+   * @param {String} type - Event name
+   * @param {...Function} callbacks - Event callbacks
+   * @return {Draggable}
+   * @example draggable.on('drag:start', (dragEvent) => dragEvent.cancel());
+   */
+  on(type, ...callbacks) {
+    this.emitter.on(type, ...callbacks);
+    return this;
+  }
+
+  /**
+   * Removes listener from draggable
+   * @param {String} type - Event name
+   * @param {Function} callback - Event callback
+   * @return {Draggable}
+   * @example draggable.off('drag:start', handlerFunction);
+   */
+  off(type, callback) {
+    this.emitter.off(type, callback);
+    return this;
+  }
+
+  /**
+   * Triggers draggable event
+   * @param {AbstractEvent} event - Event instance
+   * @return {Draggable}
+   * @example draggable.trigger(event);
+   */
+  trigger(event) {
+    this.emitter.trigger(event);
+    return this;
+  }
+
+  /**
+   * Returns class name for class identifier
+   * @param {String} name - Name of class identifier
+   * @return {String|null}
+   */
+  getClassNameFor(name) {
+    return this.options.classes[name];
+  }
+
+  /**
+   * Returns true if this draggable instance is currently dragging
+   * @return {Boolean}
+   */
+  isDragging() {
+    return Boolean(this.dragging);
+  }
+
+  /**
+   * Returns all draggable elements
+   * @return {HTMLElement[]}
+   */
+  getDraggableElements() {
+    return this.containers.reduce((current, container) => {
+      return [...current, ...this.getDraggableElementsForContainer(container)];
+    }, []);
+  }
+
+  /**
+   * Returns draggable elements for a given container, excluding the mirror and
+   * original source element if present
+   * @param {HTMLElement} container
+   * @return {HTMLElement[]}
+   */
+  getDraggableElementsForContainer(container) {
+    const allDraggableElements = container.querySelectorAll(this.options.draggable);
+
+    return [...allDraggableElements].filter(childElement => {
+      return childElement !== this.originalSource && childElement !== this.mirror;
+    });
+  }
+
+  /**
+   * Drag start handler
+   * @private
+   * @param {Event} event - DOM Drag event
+   */
+  [onDragStart](event) {
+    const sensorEvent = getSensorEvent(event);
+    const { target, container } = sensorEvent;
+
+    if (!this.containers.includes(container)) {
+      return;
+    }
+
+    if (this.options.handle && target && !(0, _utils.closest)(target, this.options.handle)) {
+      sensorEvent.cancel();
+      return;
+    }
+
+    // Find draggable source element
+    this.originalSource = (0, _utils.closest)(target, this.options.draggable);
+    this.sourceContainer = container;
+
+    if (!this.originalSource) {
+      sensorEvent.cancel();
+      return;
+    }
+
+    if (this.lastPlacedSource && this.lastPlacedContainer) {
+      clearTimeout(this.placedTimeoutID);
+      this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
+      this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
+    }
+
+    this.source = this.originalSource.cloneNode(true);
+    this.originalSource.parentNode.insertBefore(this.source, this.originalSource);
+    this.originalSource.style.display = 'none';
+
+    const dragEvent = new _DragEvent.DragStartEvent({
+      source: this.source,
+      originalSource: this.originalSource,
+      sourceContainer: container,
+      sensorEvent
+    });
+
+    this.trigger(dragEvent);
+
+    this.dragging = !dragEvent.canceled();
+
+    if (dragEvent.canceled()) {
+      this.source.parentNode.removeChild(this.source);
+      this.originalSource.style.display = null;
+      return;
+    }
+
+    this.originalSource.classList.add(this.getClassNameFor('source:original'));
+    this.source.classList.add(this.getClassNameFor('source:dragging'));
+    this.sourceContainer.classList.add(this.getClassNameFor('container:dragging'));
+    document.body.classList.add(this.getClassNameFor('body:dragging'));
+    applyUserSelect(document.body, 'none');
+
+    requestAnimationFrame(() => {
+      const oldSensorEvent = getSensorEvent(event);
+      const newSensorEvent = oldSensorEvent.clone({ target: this.source });
+
+      this[onDragMove](_extends({}, event, {
+        detail: newSensorEvent
+      }));
+    });
+  }
+
+  /**
+   * Drag move handler
+   * @private
+   * @param {Event} event - DOM Drag event
+   */
+  [onDragMove](event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const sensorEvent = getSensorEvent(event);
+    const { container } = sensorEvent;
+    let target = sensorEvent.target;
+
+    const dragMoveEvent = new _DragEvent.DragMoveEvent({
+      source: this.source,
+      originalSource: this.originalSource,
+      sourceContainer: container,
+      sensorEvent
+    });
+
+    this.trigger(dragMoveEvent);
+
+    if (dragMoveEvent.canceled()) {
+      sensorEvent.cancel();
+    }
+
+    target = (0, _utils.closest)(target, this.options.draggable);
+    const withinCorrectContainer = (0, _utils.closest)(sensorEvent.target, this.containers);
+    const overContainer = sensorEvent.overContainer || withinCorrectContainer;
+    const isLeavingContainer = this.currentOverContainer && overContainer !== this.currentOverContainer;
+    const isLeavingDraggable = this.currentOver && target !== this.currentOver;
+    const isOverContainer = overContainer && this.currentOverContainer !== overContainer;
+    const isOverDraggable = withinCorrectContainer && target && this.currentOver !== target;
+
+    if (isLeavingDraggable) {
+      const dragOutEvent = new _DragEvent.DragOutEvent({
+        source: this.source,
+        originalSource: this.originalSource,
+        sourceContainer: container,
+        sensorEvent,
+        over: this.currentOver
+      });
+
+      this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
+      this.currentOver = null;
+
+      this.trigger(dragOutEvent);
+    }
+
+    if (isLeavingContainer) {
+      const dragOutContainerEvent = new _DragEvent.DragOutContainerEvent({
+        source: this.source,
+        originalSource: this.originalSource,
+        sourceContainer: container,
+        sensorEvent,
+        overContainer: this.currentOverContainer
+      });
+
+      this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
+      this.currentOverContainer = null;
+
+      this.trigger(dragOutContainerEvent);
+    }
+
+    if (isOverContainer) {
+      overContainer.classList.add(this.getClassNameFor('container:over'));
+
+      const dragOverContainerEvent = new _DragEvent.DragOverContainerEvent({
+        source: this.source,
+        originalSource: this.originalSource,
+        sourceContainer: container,
+        sensorEvent,
+        overContainer
+      });
+
+      this.currentOverContainer = overContainer;
+
+      this.trigger(dragOverContainerEvent);
+    }
+
+    if (isOverDraggable) {
+      target.classList.add(this.getClassNameFor('draggable:over'));
+
+      const dragOverEvent = new _DragEvent.DragOverEvent({
+        source: this.source,
+        originalSource: this.originalSource,
+        sourceContainer: container,
+        sensorEvent,
+        overContainer,
+        over: target
+      });
+
+      this.currentOver = target;
+
+      this.trigger(dragOverEvent);
+    }
+  }
+
+  /**
+   * Drag stop handler
+   * @private
+   * @param {Event} event - DOM Drag event
+   */
+  [onDragStop](event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    this.dragging = false;
+
+    const dragStopEvent = new _DragEvent.DragStopEvent({
+      source: this.source,
+      originalSource: this.originalSource,
+      sensorEvent: event.sensorEvent,
+      sourceContainer: this.sourceContainer
+    });
+
+    this.trigger(dragStopEvent);
+
+    this.source.parentNode.insertBefore(this.originalSource, this.source);
+    this.source.parentNode.removeChild(this.source);
+    this.originalSource.style.display = '';
+
+    this.source.classList.remove(this.getClassNameFor('source:dragging'));
+    this.originalSource.classList.remove(this.getClassNameFor('source:original'));
+    this.originalSource.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'));
+    applyUserSelect(document.body, '');
+
+    if (this.currentOver) {
+      this.currentOver.classList.remove(this.getClassNameFor('draggable:over'));
+    }
+
+    if (this.currentOverContainer) {
+      this.currentOverContainer.classList.remove(this.getClassNameFor('container:over'));
+    }
+
+    this.lastPlacedSource = this.originalSource;
+    this.lastPlacedContainer = this.sourceContainer;
+
+    this.placedTimeoutID = setTimeout(() => {
+      if (this.lastPlacedSource) {
+        this.lastPlacedSource.classList.remove(this.getClassNameFor('source:placed'));
+      }
+
+      if (this.lastPlacedContainer) {
+        this.lastPlacedContainer.classList.remove(this.getClassNameFor('container:placed'));
+      }
+
+      this.lastPlacedSource = null;
+      this.lastPlacedContainer = null;
+    }, this.options.placedTimeout);
+
+    this.source = null;
+    this.originalSource = null;
+    this.currentOverContainer = null;
+    this.currentOver = null;
+    this.sourceContainer = null;
+  }
+
+  /**
+   * Drag pressure handler
+   * @private
+   * @param {Event} event - DOM Drag event
+   */
+  [onDragPressure](event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const sensorEvent = getSensorEvent(event);
+    const source = this.source || (0, _utils.closest)(sensorEvent.originalEvent.target, this.options.draggable);
+
+    const dragPressureEvent = new _DragEvent.DragPressureEvent({
+      sensorEvent,
+      source,
+      pressure: sensorEvent.pressure
+    });
+
+    this.trigger(dragPressureEvent);
+  }
+}
+
+exports.default = Draggable;
+Draggable.Plugins = { Announcement: _Plugins.Announcement, Focusable: _Plugins.Focusable, Mirror: _Plugins.Mirror, Scrollable: _Plugins.Scrollable };
+function getSensorEvent(event) {
+  return event.detail;
+}
+
+function applyUserSelect(element, value) {
+  element.style.webkitUserSelect = value;
+  element.style.mozUserSelect = value;
+  element.style.msUserSelect = value;
+  element.style.oUserSelect = value;
+  element.style.userSelect = value;
+}
+
+/***/ }),
+/* 38 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Sensor = __webpack_require__(4);
+
+var _Sensor2 = _interopRequireDefault(_Sensor);
+
+var _SensorEvent = __webpack_require__(3);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onMouseForceWillBegin = Symbol('onMouseForceWillBegin');
+const onMouseForceDown = Symbol('onMouseForceDown');
+const onMouseDown = Symbol('onMouseDown');
+const onMouseForceChange = Symbol('onMouseForceChange');
+const onMouseMove = Symbol('onMouseMove');
+const onMouseUp = Symbol('onMouseUp');
+const onMouseForceGlobalChange = Symbol('onMouseForceGlobalChange');
+
+/**
+ * This sensor picks up native force touch events and dictates drag operations
+ * @class ForceTouchSensor
+ * @module ForceTouchSensor
+ * @extends Sensor
+ */
+class ForceTouchSensor extends _Sensor2.default {
+  /**
+   * ForceTouchSensor constructor.
+   * @constructs ForceTouchSensor
+   * @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
+   * @param {Object} options - Options
+   */
+  constructor(containers = [], options = {}) {
+    super(containers, options);
+
+    /**
+     * Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
+     * @property mightDrag
+     * @type {Boolean}
+     */
+    this.mightDrag = false;
+
+    this[onMouseForceWillBegin] = this[onMouseForceWillBegin].bind(this);
+    this[onMouseForceDown] = this[onMouseForceDown].bind(this);
+    this[onMouseDown] = this[onMouseDown].bind(this);
+    this[onMouseForceChange] = this[onMouseForceChange].bind(this);
+    this[onMouseMove] = this[onMouseMove].bind(this);
+    this[onMouseUp] = this[onMouseUp].bind(this);
+  }
+
+  /**
+   * Attaches sensors event listeners to the DOM
+   */
+  attach() {
+    for (const container of this.containers) {
+      container.addEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
+      container.addEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
+      container.addEventListener('mousedown', this[onMouseDown], true);
+      container.addEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
+    }
+
+    document.addEventListener('mousemove', this[onMouseMove]);
+    document.addEventListener('mouseup', this[onMouseUp]);
+  }
+
+  /**
+   * Detaches sensors event listeners to the DOM
+   */
+  detach() {
+    for (const container of this.containers) {
+      container.removeEventListener('webkitmouseforcewillbegin', this[onMouseForceWillBegin], false);
+      container.removeEventListener('webkitmouseforcedown', this[onMouseForceDown], false);
+      container.removeEventListener('mousedown', this[onMouseDown], true);
+      container.removeEventListener('webkitmouseforcechanged', this[onMouseForceChange], false);
+    }
+
+    document.removeEventListener('mousemove', this[onMouseMove]);
+    document.removeEventListener('mouseup', this[onMouseUp]);
+  }
+
+  /**
+   * Mouse force will begin handler
+   * @private
+   * @param {Event} event - Mouse force will begin event
+   */
+  [onMouseForceWillBegin](event) {
+    event.preventDefault();
+    this.mightDrag = true;
+  }
+
+  /**
+   * Mouse force down handler
+   * @private
+   * @param {Event} event - Mouse force down event
+   */
+  [onMouseForceDown](event) {
+    if (this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    const container = event.currentTarget;
+
+    const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container,
+      originalEvent: event
+    });
+
+    this.trigger(container, dragStartEvent);
+
+    this.currentContainer = container;
+    this.dragging = !dragStartEvent.canceled();
+    this.mightDrag = false;
+  }
+
+  /**
+   * Mouse up handler
+   * @private
+   * @param {Event} event - Mouse up event
+   */
+  [onMouseUp](event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target: null,
+      container: this.currentContainer,
+      originalEvent: event
+    });
+
+    this.trigger(this.currentContainer, dragStopEvent);
+
+    this.currentContainer = null;
+    this.dragging = false;
+    this.mightDrag = false;
+  }
+
+  /**
+   * Mouse down handler
+   * @private
+   * @param {Event} event - Mouse down event
+   */
+  [onMouseDown](event) {
+    if (!this.mightDrag) {
+      return;
+    }
+
+    // Need workaround for real click
+    // Cancel potential drag events
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    event.preventDefault();
+  }
+
+  /**
+   * Mouse move handler
+   * @private
+   * @param {Event} event - Mouse force will begin event
+   */
+  [onMouseMove](event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+
+    const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event
+    });
+
+    this.trigger(this.currentContainer, dragMoveEvent);
+  }
+
+  /**
+   * Mouse force change handler
+   * @private
+   * @param {Event} event - Mouse force change event
+   */
+  [onMouseForceChange](event) {
+    if (this.dragging) {
+      return;
+    }
+
+    const target = event.target;
+    const container = event.currentTarget;
+
+    const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
+      pressure: event.webkitForce,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container,
+      originalEvent: event
+    });
+
+    this.trigger(container, dragPressureEvent);
+  }
+
+  /**
+   * Mouse force global change handler
+   * @private
+   * @param {Event} event - Mouse force global change event
+   */
+  [onMouseForceGlobalChange](event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = event.target;
+
+    const dragPressureEvent = new _SensorEvent.DragPressureSensorEvent({
+      pressure: event.webkitForce,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event
+    });
+
+    this.trigger(this.currentContainer, dragPressureEvent);
+  }
+}
+exports.default = ForceTouchSensor;
+
+/***/ }),
+/* 39 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ForceTouchSensor = __webpack_require__(38);
+
+var _ForceTouchSensor2 = _interopRequireDefault(_ForceTouchSensor);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _ForceTouchSensor2.default;
+
+/***/ }),
+/* 40 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _utils = __webpack_require__(2);
+
+var _Sensor = __webpack_require__(4);
+
+var _Sensor2 = _interopRequireDefault(_Sensor);
+
+var _SensorEvent = __webpack_require__(3);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onMouseDown = Symbol('onMouseDown');
+const onMouseUp = Symbol('onMouseUp');
+const onDragStart = Symbol('onDragStart');
+const onDragOver = Symbol('onDragOver');
+const onDragEnd = Symbol('onDragEnd');
+const onDrop = Symbol('onDrop');
+const reset = Symbol('reset');
+
+/**
+ * This sensor picks up native browser drag events and dictates drag operations
+ * @class DragSensor
+ * @module DragSensor
+ * @extends Sensor
+ */
+class DragSensor extends _Sensor2.default {
+  /**
+   * DragSensor constructor.
+   * @constructs DragSensor
+   * @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
+   * @param {Object} options - Options
+   */
+  constructor(containers = [], options = {}) {
+    super(containers, options);
+
+    /**
+     * Mouse down timer which will end up setting the draggable attribute, unless canceled
+     * @property mouseDownTimeout
+     * @type {Number}
+     */
+    this.mouseDownTimeout = null;
+
+    /**
+     * Draggable element needs to be remembered to unset the draggable attribute after drag operation has completed
+     * @property draggableElement
+     * @type {HTMLElement}
+     */
+    this.draggableElement = null;
+
+    /**
+     * Native draggable element could be links or images, their draggable state will be disabled during drag operation
+     * @property nativeDraggableElement
+     * @type {HTMLElement}
+     */
+    this.nativeDraggableElement = null;
+
+    this[onMouseDown] = this[onMouseDown].bind(this);
+    this[onMouseUp] = this[onMouseUp].bind(this);
+    this[onDragStart] = this[onDragStart].bind(this);
+    this[onDragOver] = this[onDragOver].bind(this);
+    this[onDragEnd] = this[onDragEnd].bind(this);
+    this[onDrop] = this[onDrop].bind(this);
+  }
+
+  /**
+   * Attaches sensors event listeners to the DOM
+   */
+  attach() {
+    document.addEventListener('mousedown', this[onMouseDown], true);
+  }
+
+  /**
+   * Detaches sensors event listeners to the DOM
+   */
+  detach() {
+    document.removeEventListener('mousedown', this[onMouseDown], true);
+  }
+
+  /**
+   * Drag start handler
+   * @private
+   * @param {Event} event - Drag start event
+   */
+  [onDragStart](event) {
+    // Need for firefox. "text" key is needed for IE
+    event.dataTransfer.setData('text', '');
+    event.dataTransfer.effectAllowed = this.options.type;
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    this.currentContainer = (0, _utils.closest)(event.target, this.containers);
+
+    if (!this.currentContainer) {
+      return;
+    }
+
+    const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event
+    });
+
+    // Workaround
+    setTimeout(() => {
+      this.trigger(this.currentContainer, dragStartEvent);
+
+      if (dragStartEvent.canceled()) {
+        this.dragging = false;
+      } else {
+        this.dragging = true;
+      }
+    }, 0);
+  }
+
+  /**
+   * Drag over handler
+   * @private
+   * @param {Event} event - Drag over event
+   */
+  [onDragOver](event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    const container = this.currentContainer;
+
+    const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container,
+      originalEvent: event
+    });
+
+    this.trigger(container, dragMoveEvent);
+
+    if (!dragMoveEvent.canceled()) {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = this.options.type;
+    }
+  }
+
+  /**
+   * Drag end handler
+   * @private
+   * @param {Event} event - Drag end event
+   */
+  [onDragEnd](event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    document.removeEventListener('mouseup', this[onMouseUp], true);
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    const container = this.currentContainer;
+
+    const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container,
+      originalEvent: event
+    });
+
+    this.trigger(container, dragStopEvent);
+
+    this.dragging = false;
+
+    this[reset]();
+  }
+
+  /**
+   * Drop handler
+   * @private
+   * @param {Event} event - Drop event
+   */
+  [onDrop](event) {
+    // eslint-disable-line class-methods-use-this
+    event.preventDefault();
+  }
+
+  /**
+   * Mouse down handler
+   * @private
+   * @param {Event} event - Mouse down event
+   */
+  [onMouseDown](event) {
+    // Firefox bug for inputs within draggables https://bugzilla.mozilla.org/show_bug.cgi?id=739071
+    if (event.target && (event.target.form || event.target.contenteditable)) {
+      return;
+    }
+
+    const nativeDraggableElement = (0, _utils.closest)(event.target, element => element.draggable);
+
+    if (nativeDraggableElement) {
+      nativeDraggableElement.draggable = false;
+      this.nativeDraggableElement = nativeDraggableElement;
+    }
+
+    document.addEventListener('mouseup', this[onMouseUp], true);
+    document.addEventListener('dragstart', this[onDragStart], false);
+    document.addEventListener('dragover', this[onDragOver], false);
+    document.addEventListener('dragend', this[onDragEnd], false);
+    document.addEventListener('drop', this[onDrop], false);
+
+    const target = (0, _utils.closest)(event.target, this.options.draggable);
+
+    if (!target) {
+      return;
+    }
+
+    this.mouseDownTimeout = setTimeout(() => {
+      target.draggable = true;
+      this.draggableElement = target;
+    }, this.options.delay);
+  }
+
+  /**
+   * Mouse up handler
+   * @private
+   * @param {Event} event - Mouse up event
+   */
+  [onMouseUp]() {
+    this[reset]();
+  }
+
+  /**
+   * Mouse up handler
+   * @private
+   * @param {Event} event - Mouse up event
+   */
+  [reset]() {
+    clearTimeout(this.mouseDownTimeout);
+
+    document.removeEventListener('mouseup', this[onMouseUp], true);
+    document.removeEventListener('dragstart', this[onDragStart], false);
+    document.removeEventListener('dragover', this[onDragOver], false);
+    document.removeEventListener('dragend', this[onDragEnd], false);
+    document.removeEventListener('drop', this[onDrop], false);
+
+    if (this.nativeDraggableElement) {
+      this.nativeDraggableElement.draggable = true;
+      this.nativeDraggableElement = null;
+    }
+
+    if (this.draggableElement) {
+      this.draggableElement.draggable = false;
+      this.draggableElement = null;
+    }
+  }
+}
+exports.default = DragSensor;
+
+/***/ }),
+/* 41 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DragSensor = __webpack_require__(40);
+
+var _DragSensor2 = _interopRequireDefault(_DragSensor);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _DragSensor2.default;
+
+/***/ }),
+/* 42 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _utils = __webpack_require__(2);
+
+var _Sensor = __webpack_require__(4);
+
+var _Sensor2 = _interopRequireDefault(_Sensor);
+
+var _SensorEvent = __webpack_require__(3);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onTouchStart = Symbol('onTouchStart');
+const onTouchHold = Symbol('onTouchHold');
+const onTouchEnd = Symbol('onTouchEnd');
+const onTouchMove = Symbol('onTouchMove');
+
+/**
+ * Prevents scrolling when set to true
+ * @var {Boolean} preventScrolling
+ */
+let preventScrolling = false;
+
+// WebKit requires cancelable `touchmove` events to be added as early as possible
+window.addEventListener('touchmove', event => {
+  if (!preventScrolling) {
+    return;
+  }
+
+  // Prevent scrolling
+  event.preventDefault();
+}, { passive: false });
+
+/**
+ * This sensor picks up native browser touch events and dictates drag operations
+ * @class TouchSensor
+ * @module TouchSensor
+ * @extends Sensor
+ */
+class TouchSensor extends _Sensor2.default {
+  /**
+   * TouchSensor constructor.
+   * @constructs TouchSensor
+   * @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
+   * @param {Object} options - Options
+   */
+  constructor(containers = [], options = {}) {
+    super(containers, options);
+
+    /**
+     * Closest scrollable container so accidental scroll can cancel long touch
+     * @property currentScrollableParent
+     * @type {HTMLElement}
+     */
+    this.currentScrollableParent = null;
+
+    /**
+     * TimeoutID for long touch
+     * @property tapTimeout
+     * @type {Number}
+     */
+    this.tapTimeout = null;
+
+    /**
+     * touchMoved indicates if touch has moved during tapTimeout
+     * @property touchMoved
+     * @type {Boolean}
+     */
+    this.touchMoved = false;
+
+    this[onTouchStart] = this[onTouchStart].bind(this);
+    this[onTouchHold] = this[onTouchHold].bind(this);
+    this[onTouchEnd] = this[onTouchEnd].bind(this);
+    this[onTouchMove] = this[onTouchMove].bind(this);
+  }
+
+  /**
+   * Attaches sensors event listeners to the DOM
+   */
+  attach() {
+    document.addEventListener('touchstart', this[onTouchStart]);
+  }
+
+  /**
+   * Detaches sensors event listeners to the DOM
+   */
+  detach() {
+    document.removeEventListener('touchstart', this[onTouchStart]);
+  }
+
+  /**
+   * Touch start handler
+   * @private
+   * @param {Event} event - Touch start event
+   */
+  [onTouchStart](event) {
+    const container = (0, _utils.closest)(event.target, this.containers);
+
+    if (!container) {
+      return;
+    }
+
+    document.addEventListener('touchmove', this[onTouchMove]);
+    document.addEventListener('touchend', this[onTouchEnd]);
+    document.addEventListener('touchcancel', this[onTouchEnd]);
+    container.addEventListener('contextmenu', onContextMenu);
+
+    this.currentContainer = container;
+    this.tapTimeout = setTimeout(this[onTouchHold](event, container), this.options.delay);
+  }
+
+  /**
+   * Touch hold handler
+   * @private
+   * @param {Event} event - Touch start event
+   * @param {HTMLElement} container - Container element
+   */
+  [onTouchHold](event, container) {
+    return () => {
+      if (this.touchMoved) {
+        return;
+      }
+
+      const touch = event.touches[0] || event.changedTouches[0];
+      const target = event.target;
+
+      const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
+        clientX: touch.pageX,
+        clientY: touch.pageY,
+        target,
+        container,
+        originalEvent: event
+      });
+
+      this.trigger(container, dragStartEvent);
+
+      this.dragging = !dragStartEvent.canceled();
+      preventScrolling = this.dragging;
+    };
+  }
+
+  /**
+   * Touch move handler
+   * @private
+   * @param {Event} event - Touch move event
+   */
+  [onTouchMove](event) {
+    this.touchMoved = true;
+
+    if (!this.dragging) {
+      return;
+    }
+
+    const touch = event.touches[0] || event.changedTouches[0];
+    const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
+
+    const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
+      clientX: touch.pageX,
+      clientY: touch.pageY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event
+    });
+
+    this.trigger(this.currentContainer, dragMoveEvent);
+  }
+
+  /**
+   * Touch end handler
+   * @private
+   * @param {Event} event - Touch end event
+   */
+  [onTouchEnd](event) {
+    this.touchMoved = false;
+    preventScrolling = false;
+
+    document.removeEventListener('touchend', this[onTouchEnd]);
+    document.removeEventListener('touchcancel', this[onTouchEnd]);
+    document.removeEventListener('touchmove', this[onTouchMove]);
+
+    if (this.currentContainer) {
+      this.currentContainer.removeEventListener('contextmenu', onContextMenu);
+    }
+
+    clearTimeout(this.tapTimeout);
+
+    if (!this.dragging) {
+      return;
+    }
+
+    const touch = event.touches[0] || event.changedTouches[0];
+    const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
+
+    event.preventDefault();
+
+    const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
+      clientX: touch.pageX,
+      clientY: touch.pageY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event
+    });
+
+    this.trigger(this.currentContainer, dragStopEvent);
+
+    this.currentContainer = null;
+    this.dragging = false;
+  }
+}
+
+exports.default = TouchSensor;
+function onContextMenu(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+/***/ }),
+/* 43 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _TouchSensor = __webpack_require__(42);
+
+var _TouchSensor2 = _interopRequireDefault(_TouchSensor);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _TouchSensor2.default;
+
+/***/ }),
+/* 44 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragPressureSensorEvent = exports.DragStopSensorEvent = exports.DragMoveSensorEvent = exports.DragStartSensorEvent = exports.SensorEvent = undefined;
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Base sensor event
+ * @class SensorEvent
+ * @module SensorEvent
+ * @extends AbstractEvent
+ */
+class SensorEvent extends _AbstractEvent2.default {
+  /**
+   * Original browser event that triggered a sensor
+   * @property originalEvent
+   * @type {Event}
+   * @readonly
+   */
+  get originalEvent() {
+    return this.data.originalEvent;
+  }
+
+  /**
+   * Normalized clientX for both touch and mouse events
+   * @property clientX
+   * @type {Number}
+   * @readonly
+   */
+  get clientX() {
+    return this.data.clientX;
+  }
+
+  /**
+   * Normalized clientY for both touch and mouse events
+   * @property clientY
+   * @type {Number}
+   * @readonly
+   */
+  get clientY() {
+    return this.data.clientY;
+  }
+
+  /**
+   * Normalized target for both touch and mouse events
+   * Returns the element that is behind cursor or touch pointer
+   * @property target
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get target() {
+    return this.data.target;
+  }
+
+  /**
+   * Container that initiated the sensor
+   * @property container
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get container() {
+    return this.data.container;
+  }
+
+  /**
+   * Trackpad pressure
+   * @property pressure
+   * @type {Number}
+   * @readonly
+   */
+  get pressure() {
+    return this.data.pressure;
+  }
+}
+
+exports.SensorEvent = SensorEvent; /**
+                                    * Drag start sensor event
+                                    * @class DragStartSensorEvent
+                                    * @module DragStartSensorEvent
+                                    * @extends SensorEvent
+                                    */
+
+class DragStartSensorEvent extends SensorEvent {}
+
+exports.DragStartSensorEvent = DragStartSensorEvent; /**
+                                                      * Drag move sensor event
+                                                      * @class DragMoveSensorEvent
+                                                      * @module DragMoveSensorEvent
+                                                      * @extends SensorEvent
+                                                      */
+
+DragStartSensorEvent.type = 'drag:start';
+class DragMoveSensorEvent extends SensorEvent {}
+
+exports.DragMoveSensorEvent = DragMoveSensorEvent; /**
+                                                    * Drag stop sensor event
+                                                    * @class DragStopSensorEvent
+                                                    * @module DragStopSensorEvent
+                                                    * @extends SensorEvent
+                                                    */
+
+DragMoveSensorEvent.type = 'drag:move';
+class DragStopSensorEvent extends SensorEvent {}
+
+exports.DragStopSensorEvent = DragStopSensorEvent; /**
+                                                    * Drag pressure sensor event
+                                                    * @class DragPressureSensorEvent
+                                                    * @module DragPressureSensorEvent
+                                                    * @extends SensorEvent
+                                                    */
+
+DragStopSensorEvent.type = 'drag:stop';
+class DragPressureSensorEvent extends SensorEvent {}
+exports.DragPressureSensorEvent = DragPressureSensorEvent;
+DragPressureSensorEvent.type = 'drag:pressure';
+
+/***/ }),
+/* 45 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _utils = __webpack_require__(2);
+
+var _Sensor = __webpack_require__(4);
+
+var _Sensor2 = _interopRequireDefault(_Sensor);
+
+var _SensorEvent = __webpack_require__(3);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onContextMenuWhileDragging = Symbol('onContextMenuWhileDragging');
+const onMouseDown = Symbol('onMouseDown');
+const onMouseMove = Symbol('onMouseMove');
+const onMouseUp = Symbol('onMouseUp');
+
+/**
+ * This sensor picks up native browser mouse events and dictates drag operations
+ * @class MouseSensor
+ * @module MouseSensor
+ * @extends Sensor
+ */
+class MouseSensor extends _Sensor2.default {
+  /**
+   * MouseSensor constructor.
+   * @constructs MouseSensor
+   * @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
+   * @param {Object} options - Options
+   */
+  constructor(containers = [], options = {}) {
+    super(containers, options);
+
+    /**
+     * Indicates if mouse button is still down
+     * @property mouseDown
+     * @type {Boolean}
+     */
+    this.mouseDown = false;
+
+    /**
+     * Mouse down timer which will end up triggering the drag start operation
+     * @property mouseDownTimeout
+     * @type {Number}
+     */
+    this.mouseDownTimeout = null;
+
+    /**
+     * Indicates if context menu has been opened during drag operation
+     * @property openedContextMenu
+     * @type {Boolean}
+     */
+    this.openedContextMenu = false;
+
+    this[onContextMenuWhileDragging] = this[onContextMenuWhileDragging].bind(this);
+    this[onMouseDown] = this[onMouseDown].bind(this);
+    this[onMouseMove] = this[onMouseMove].bind(this);
+    this[onMouseUp] = this[onMouseUp].bind(this);
+  }
+
+  /**
+   * Attaches sensors event listeners to the DOM
+   */
+  attach() {
+    document.addEventListener('mousedown', this[onMouseDown], true);
+  }
+
+  /**
+   * Detaches sensors event listeners to the DOM
+   */
+  detach() {
+    document.removeEventListener('mousedown', this[onMouseDown], true);
+  }
+
+  /**
+   * Mouse down handler
+   * @private
+   * @param {Event} event - Mouse down event
+   */
+  [onMouseDown](event) {
+    if (event.button !== 0 || event.ctrlKey || event.metaKey) {
+      return;
+    }
+
+    document.addEventListener('mouseup', this[onMouseUp]);
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    const container = (0, _utils.closest)(target, this.containers);
+
+    if (!container) {
+      return;
+    }
+
+    document.addEventListener('dragstart', preventNativeDragStart);
+
+    this.mouseDown = true;
+
+    clearTimeout(this.mouseDownTimeout);
+    this.mouseDownTimeout = setTimeout(() => {
+      if (!this.mouseDown) {
+        return;
+      }
+
+      const dragStartEvent = new _SensorEvent.DragStartSensorEvent({
+        clientX: event.clientX,
+        clientY: event.clientY,
+        target,
+        container,
+        originalEvent: event
+      });
+
+      this.trigger(container, dragStartEvent);
+
+      this.currentContainer = container;
+      this.dragging = !dragStartEvent.canceled();
+
+      if (this.dragging) {
+        document.addEventListener('contextmenu', this[onContextMenuWhileDragging]);
+        document.addEventListener('mousemove', this[onMouseMove]);
+      }
+    }, this.options.delay);
+  }
+
+  /**
+   * Mouse move handler
+   * @private
+   * @param {Event} event - Mouse move event
+   */
+  [onMouseMove](event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+
+    const dragMoveEvent = new _SensorEvent.DragMoveSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event
+    });
+
+    this.trigger(this.currentContainer, dragMoveEvent);
+  }
+
+  /**
+   * Mouse up handler
+   * @private
+   * @param {Event} event - Mouse up event
+   */
+  [onMouseUp](event) {
+    this.mouseDown = Boolean(this.openedContextMenu);
+
+    if (this.openedContextMenu) {
+      this.openedContextMenu = false;
+      return;
+    }
+
+    document.removeEventListener('mouseup', this[onMouseUp]);
+    document.removeEventListener('dragstart', preventNativeDragStart);
+
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+
+    const dragStopEvent = new _SensorEvent.DragStopSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event
+    });
+
+    this.trigger(this.currentContainer, dragStopEvent);
+
+    document.removeEventListener('contextmenu', this[onContextMenuWhileDragging]);
+    document.removeEventListener('mousemove', this[onMouseMove]);
+
+    this.currentContainer = null;
+    this.dragging = false;
+  }
+
+  /**
+   * Context menu handler
+   * @private
+   * @param {Event} event - Context menu event
+   */
+  [onContextMenuWhileDragging](event) {
+    event.preventDefault();
+    this.openedContextMenu = true;
+  }
+}
+
+exports.default = MouseSensor;
+function preventNativeDragStart(event) {
+  event.preventDefault();
+}
+
+/***/ }),
+/* 46 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _MouseSensor = __webpack_require__(45);
+
+var _MouseSensor2 = _interopRequireDefault(_MouseSensor);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _MouseSensor2.default;
+
+/***/ }),
+/* 47 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+/**
+ * Base sensor class. Extend from this class to create a new or custom sensor
+ * @class Sensor
+ * @module Sensor
+ */
+class Sensor {
+  /**
+   * Sensor constructor.
+   * @constructs Sensor
+   * @param {HTMLElement[]|NodeList|HTMLElement} containers - Containers
+   * @param {Object} options - Options
+   */
+  constructor(containers = [], options = {}) {
+    /**
+     * Current containers
+     * @property containers
+     * @type {HTMLElement[]}
+     */
+    this.containers = [...containers];
+
+    /**
+     * Current options
+     * @property options
+     * @type {Object}
+     */
+    this.options = _extends({}, options);
+
+    /**
+     * Current drag state
+     * @property dragging
+     * @type {Boolean}
+     */
+    this.dragging = false;
+
+    /**
+     * Current container
+     * @property currentContainer
+     * @type {HTMLElement}
+     */
+    this.currentContainer = null;
+  }
+
+  /**
+   * Attaches sensors event listeners to the DOM
+   * @return {Sensor}
+   */
+  attach() {
+    return this;
+  }
+
+  /**
+   * Detaches sensors event listeners to the DOM
+   * @return {Sensor}
+   */
+  detach() {
+    return this;
+  }
+
+  /**
+   * Adds container to this sensor instance
+   * @param {...HTMLElement} containers - Containers you want to add to this sensor
+   * @example draggable.addContainer(document.body)
+   */
+  addContainer(...containers) {
+    this.containers = [...this.containers, ...containers];
+  }
+
+  /**
+   * Removes container from this sensor instance
+   * @param {...HTMLElement} containers - Containers you want to remove from this sensor
+   * @example draggable.removeContainer(document.body)
+   */
+  removeContainer(...containers) {
+    this.containers = this.containers.filter(container => !containers.includes(container));
+  }
+
+  /**
+   * Triggers event on target element
+   * @param {HTMLElement} element - Element to trigger event on
+   * @param {SensorEvent} sensorEvent - Sensor event to trigger
+   */
+  trigger(element, sensorEvent) {
+    const event = document.createEvent('Event');
+    event.detail = sensorEvent;
+    event.initEvent(sensorEvent.type, true, true);
+    element.dispatchEvent(event);
+    this.lastEvent = sensorEvent;
+
+    return sensorEvent;
+  }
+}
+exports.default = Sensor;
+
+/***/ }),
+/* 48 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = requestNextAnimationFrame;
+function requestNextAnimationFrame(callback) {
+  return requestAnimationFrame(() => {
+    requestAnimationFrame(callback);
+  });
+}
+
+/***/ }),
+/* 49 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _requestNextAnimationFrame = __webpack_require__(48);
+
+var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _requestNextAnimationFrame2.default;
+
+/***/ }),
+/* 50 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = closest;
+const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;
+
+/**
+ * Get the closest parent element of a given element that matches the given
+ * selector string or matching function
+ *
+ * @param {Element} element The child element to find a parent of
+ * @param {String|Function} selector The string or function to use to match
+ *     the parent element
+ * @return {Element|null}
+ */
+function closest(element, value) {
+  if (!element) {
+    return null;
+  }
+
+  const selector = value;
+  const callback = value;
+  const nodeList = value;
+  const singleElement = value;
+
+  const isSelector = Boolean(typeof value === 'string');
+  const isFunction = Boolean(typeof value === 'function');
+  const isNodeList = Boolean(value instanceof NodeList || value instanceof Array);
+  const isElement = Boolean(value instanceof HTMLElement);
+
+  function conditionFn(currentElement) {
+    if (!currentElement) {
+      return currentElement;
+    } else if (isSelector) {
+      return matchFunction.call(currentElement, selector);
+    } else if (isNodeList) {
+      return [...nodeList].includes(currentElement);
+    } else if (isElement) {
+      return singleElement === currentElement;
+    } else if (isFunction) {
+      return callback(currentElement);
+    } else {
+      return null;
+    }
+  }
+
+  let current = element;
+
+  do {
+    current = current.correspondingUseElement || current.correspondingElement || current;
+
+    if (conditionFn(current)) {
+      return current;
+    }
+
+    current = current.parentNode;
+  } while (current && current !== document.body && current !== document);
+
+  return null;
+}
+
+/***/ }),
+/* 51 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _closest = __webpack_require__(50);
+
+var _closest2 = _interopRequireDefault(_closest);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _closest2.default;
+
+/***/ }),
+/* 52 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = exports.scroll = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _AbstractPlugin = __webpack_require__(1);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+var _utils = __webpack_require__(2);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onDragStart = exports.onDragStart = Symbol('onDragStart');
+const onDragMove = exports.onDragMove = Symbol('onDragMove');
+const onDragStop = exports.onDragStop = Symbol('onDragStop');
+const scroll = exports.scroll = Symbol('scroll');
+
+/**
+ * Scrollable default options
+ * @property {Object} defaultOptions
+ * @property {Number} defaultOptions.speed
+ * @property {Number} defaultOptions.sensitivity
+ * @property {HTMLElement[]} defaultOptions.scrollableElements
+ * @type {Object}
+ */
+const defaultOptions = exports.defaultOptions = {
+  speed: 6,
+  sensitivity: 50,
+  scrollableElements: []
+};
+
+/**
+ * Scrollable plugin which scrolls the closest scrollable parent
+ * @class Scrollable
+ * @module Scrollable
+ * @extends AbstractPlugin
+ */
+class Scrollable extends _AbstractPlugin2.default {
+  /**
+   * Scrollable constructor.
+   * @constructs Scrollable
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    super(draggable);
+
+    /**
+     * Scrollable options
+     * @property {Object} options
+     * @property {Number} options.speed
+     * @property {Number} options.sensitivity
+     * @property {HTMLElement[]} options.scrollableElements
+     * @type {Object}
+     */
+    this.options = _extends({}, defaultOptions, this.getOptions());
+
+    /**
+     * Keeps current mouse position
+     * @property {Object} currentMousePosition
+     * @property {Number} currentMousePosition.clientX
+     * @property {Number} currentMousePosition.clientY
+     * @type {Object|null}
+     */
+    this.currentMousePosition = null;
+
+    /**
+     * Scroll animation frame
+     * @property scrollAnimationFrame
+     * @type {Number|null}
+     */
+    this.scrollAnimationFrame = null;
+
+    /**
+     * Closest scrollable element
+     * @property scrollableElement
+     * @type {HTMLElement|null}
+     */
+    this.scrollableElement = null;
+
+    /**
+     * Animation frame looking for the closest scrollable element
+     * @property findScrollableElementFrame
+     * @type {Number|null}
+     */
+    this.findScrollableElementFrame = null;
+
+    this[onDragStart] = this[onDragStart].bind(this);
+    this[onDragMove] = this[onDragMove].bind(this);
+    this[onDragStop] = this[onDragStop].bind(this);
+    this[scroll] = this[scroll].bind(this);
+  }
+
+  /**
+   * Attaches plugins event listeners
+   */
+  attach() {
+    this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]);
+  }
+
+  /**
+   * Detaches plugins event listeners
+   */
+  detach() {
+    this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]);
+  }
+
+  /**
+   * Returns options passed through draggable
+   * @return {Object}
+   */
+  getOptions() {
+    return this.draggable.options.scrollable || {};
+  }
+
+  /**
+   * Returns closest scrollable elements by element
+   * @param {HTMLElement} target
+   * @return {HTMLElement}
+   */
+  getScrollableElement(target) {
+    if (this.hasDefinedScrollableElements()) {
+      return (0, _utils.closest)(target, this.options.scrollableElements) || document.documentElement;
+    } else {
+      return closestScrollableElement(target);
+    }
+  }
+
+  /**
+   * Returns true if at least one scrollable element have been defined via options
+   * @param {HTMLElement} target
+   * @return {Boolean}
+   */
+  hasDefinedScrollableElements() {
+    return Boolean(this.options.scrollableElements.length !== 0);
+  }
+
+  /**
+   * Drag start handler. Finds closest scrollable parent in separate frame
+   * @param {DragStartEvent} dragEvent
+   * @private
+   */
+  [onDragStart](dragEvent) {
+    this.findScrollableElementFrame = requestAnimationFrame(() => {
+      this.scrollableElement = this.getScrollableElement(dragEvent.source);
+    });
+  }
+
+  /**
+   * Drag move handler. Remembers mouse position and initiates scrolling
+   * @param {DragMoveEvent} dragEvent
+   * @private
+   */
+  [onDragMove](dragEvent) {
+    this.findScrollableElementFrame = requestAnimationFrame(() => {
+      this.scrollableElement = this.getScrollableElement(dragEvent.sensorEvent.target);
+    });
+
+    if (!this.scrollableElement) {
+      return;
+    }
+
+    const sensorEvent = dragEvent.sensorEvent;
+    const scrollOffset = { x: 0, y: 0 };
+
+    if ('ontouchstart' in window) {
+      scrollOffset.y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+      scrollOffset.x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+    }
+
+    this.currentMousePosition = {
+      clientX: sensorEvent.clientX - scrollOffset.x,
+      clientY: sensorEvent.clientY - scrollOffset.y
+    };
+
+    this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
+  }
+
+  /**
+   * Drag stop handler. Cancels scroll animations and resets state
+   * @private
+   */
+  [onDragStop]() {
+    cancelAnimationFrame(this.scrollAnimationFrame);
+    cancelAnimationFrame(this.findScrollableElementFrame);
+
+    this.scrollableElement = null;
+    this.scrollAnimationFrame = null;
+    this.findScrollableElementFrame = null;
+    this.currentMousePosition = null;
+  }
+
+  /**
+   * Scroll function that does the heavylifting
+   * @private
+   */
+  [scroll]() {
+    if (!this.scrollableElement || !this.currentMousePosition) {
+      return;
+    }
+
+    cancelAnimationFrame(this.scrollAnimationFrame);
+
+    const { speed, sensitivity } = this.options;
+
+    const rect = this.scrollableElement.getBoundingClientRect();
+    const bottomCutOff = rect.bottom > window.innerHeight;
+    const topCutOff = rect.top < 0;
+    const cutOff = topCutOff || bottomCutOff;
+
+    const documentScrollingElement = getDocumentScrollingElement();
+    const scrollableElement = this.scrollableElement;
+    const clientX = this.currentMousePosition.clientX;
+    const clientY = this.currentMousePosition.clientY;
+
+    if (scrollableElement !== document.body && scrollableElement !== document.documentElement && !cutOff) {
+      const { offsetHeight, offsetWidth } = scrollableElement;
+
+      if (rect.top + offsetHeight - clientY < sensitivity) {
+        scrollableElement.scrollTop += speed;
+      } else if (clientY - rect.top < sensitivity) {
+        scrollableElement.scrollTop -= speed;
+      }
+
+      if (rect.left + offsetWidth - clientX < sensitivity) {
+        scrollableElement.scrollLeft += speed;
+      } else if (clientX - rect.left < sensitivity) {
+        scrollableElement.scrollLeft -= speed;
+      }
+    } else {
+      const { innerHeight, innerWidth } = window;
+
+      if (clientY < sensitivity) {
+        documentScrollingElement.scrollTop -= speed;
+      } else if (innerHeight - clientY < sensitivity) {
+        documentScrollingElement.scrollTop += speed;
+      }
+
+      if (clientX < sensitivity) {
+        documentScrollingElement.scrollLeft -= speed;
+      } else if (innerWidth - clientX < sensitivity) {
+        documentScrollingElement.scrollLeft += speed;
+      }
+    }
+
+    this.scrollAnimationFrame = requestAnimationFrame(this[scroll]);
+  }
+}
+
+exports.default = Scrollable; /**
+                               * Returns true if the passed element has overflow
+                               * @param {HTMLElement} element
+                               * @return {Boolean}
+                               * @private
+                               */
+
+function hasOverflow(element) {
+  const overflowRegex = /(auto|scroll)/;
+  const computedStyles = getComputedStyle(element, null);
+
+  const overflow = computedStyles.getPropertyValue('overflow') + computedStyles.getPropertyValue('overflow-y') + computedStyles.getPropertyValue('overflow-x');
+
+  return overflowRegex.test(overflow);
+}
+
+/**
+ * Returns true if the passed element is statically positioned
+ * @param {HTMLElement} element
+ * @return {Boolean}
+ * @private
+ */
+function isStaticallyPositioned(element) {
+  const position = getComputedStyle(element).getPropertyValue('position');
+  return position === 'static';
+}
+
+/**
+ * Finds closest scrollable element
+ * @param {HTMLElement} element
+ * @return {HTMLElement}
+ * @private
+ */
+function closestScrollableElement(element) {
+  if (!element) {
+    return getDocumentScrollingElement();
+  }
+
+  const position = getComputedStyle(element).getPropertyValue('position');
+  const excludeStaticParents = position === 'absolute';
+
+  const scrollableElement = (0, _utils.closest)(element, parent => {
+    if (excludeStaticParents && isStaticallyPositioned(parent)) {
+      return false;
+    }
+    return hasOverflow(parent);
+  });
+
+  if (position === 'fixed' || !scrollableElement) {
+    return getDocumentScrollingElement();
+  } else {
+    return scrollableElement;
+  }
+}
+
+/**
+ * Returns element that scrolls document
+ * @return {HTMLElement}
+ * @private
+ */
+function getDocumentScrollingElement() {
+  return document.scrollingElement || document.documentElement;
+}
+
+/***/ }),
+/* 53 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = undefined;
+
+var _Scrollable = __webpack_require__(52);
+
+var _Scrollable2 = _interopRequireDefault(_Scrollable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Scrollable2.default;
+exports.defaultOptions = _Scrollable.defaultOptions;
+
+/***/ }),
+/* 54 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MirrorDestroyEvent = exports.MirrorMoveEvent = exports.MirrorAttachedEvent = exports.MirrorCreatedEvent = exports.MirrorCreateEvent = exports.MirrorEvent = undefined;
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Base mirror event
+ * @class MirrorEvent
+ * @module MirrorEvent
+ * @extends AbstractEvent
+ */
+class MirrorEvent extends _AbstractEvent2.default {
+  /**
+   * Draggables source element
+   * @property source
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get source() {
+    return this.data.source;
+  }
+
+  /**
+   * Draggables original source element
+   * @property originalSource
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get originalSource() {
+    return this.data.originalSource;
+  }
+
+  /**
+   * Draggables source container element
+   * @property sourceContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get sourceContainer() {
+    return this.data.sourceContainer;
+  }
+
+  /**
+   * Sensor event
+   * @property sensorEvent
+   * @type {SensorEvent}
+   * @readonly
+   */
+  get sensorEvent() {
+    return this.data.sensorEvent;
+  }
+
+  /**
+   * Drag event
+   * @property dragEvent
+   * @type {DragEvent}
+   * @readonly
+   */
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+
+  /**
+   * Original event that triggered sensor event
+   * @property originalEvent
+   * @type {Event}
+   * @readonly
+   */
+  get originalEvent() {
+    if (this.sensorEvent) {
+      return this.sensorEvent.originalEvent;
+    }
+
+    return null;
+  }
+}
+
+exports.MirrorEvent = MirrorEvent; /**
+                                    * Mirror create event
+                                    * @class MirrorCreateEvent
+                                    * @module MirrorCreateEvent
+                                    * @extends MirrorEvent
+                                    */
+
+class MirrorCreateEvent extends MirrorEvent {}
+
+exports.MirrorCreateEvent = MirrorCreateEvent; /**
+                                                * Mirror created event
+                                                * @class MirrorCreatedEvent
+                                                * @module MirrorCreatedEvent
+                                                * @extends MirrorEvent
+                                                */
+
+MirrorCreateEvent.type = 'mirror:create';
+class MirrorCreatedEvent extends MirrorEvent {
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get mirror() {
+    return this.data.mirror;
+  }
+}
+
+exports.MirrorCreatedEvent = MirrorCreatedEvent; /**
+                                                  * Mirror attached event
+                                                  * @class MirrorAttachedEvent
+                                                  * @module MirrorAttachedEvent
+                                                  * @extends MirrorEvent
+                                                  */
+
+MirrorCreatedEvent.type = 'mirror:created';
+class MirrorAttachedEvent extends MirrorEvent {
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get mirror() {
+    return this.data.mirror;
+  }
+}
+
+exports.MirrorAttachedEvent = MirrorAttachedEvent; /**
+                                                    * Mirror move event
+                                                    * @class MirrorMoveEvent
+                                                    * @module MirrorMoveEvent
+                                                    * @extends MirrorEvent
+                                                    */
+
+MirrorAttachedEvent.type = 'mirror:attached';
+class MirrorMoveEvent extends MirrorEvent {
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get mirror() {
+    return this.data.mirror;
+  }
+}
+
+exports.MirrorMoveEvent = MirrorMoveEvent; /**
+                                            * Mirror destroy event
+                                            * @class MirrorDestroyEvent
+                                            * @module MirrorDestroyEvent
+                                            * @extends MirrorEvent
+                                            */
+
+MirrorMoveEvent.type = 'mirror:move';
+MirrorMoveEvent.cancelable = true;
+class MirrorDestroyEvent extends MirrorEvent {
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get mirror() {
+    return this.data.mirror;
+  }
+}
+exports.MirrorDestroyEvent = MirrorDestroyEvent;
+MirrorDestroyEvent.type = 'mirror:destroy';
+MirrorDestroyEvent.cancelable = true;
+
+/***/ }),
+/* 55 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _MirrorEvent = __webpack_require__(54);
+
+Object.keys(_MirrorEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MirrorEvent[key];
+    }
+  });
+});
+
+/***/ }),
+/* 56 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = exports.getAppendableContainer = exports.onScroll = exports.onMirrorMove = exports.onMirrorCreated = exports.onDragStop = exports.onDragMove = exports.onDragStart = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _AbstractPlugin = __webpack_require__(1);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+var _MirrorEvent = __webpack_require__(55);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+const onDragStart = exports.onDragStart = Symbol('onDragStart');
+const onDragMove = exports.onDragMove = Symbol('onDragMove');
+const onDragStop = exports.onDragStop = Symbol('onDragStop');
+const onMirrorCreated = exports.onMirrorCreated = Symbol('onMirrorCreated');
+const onMirrorMove = exports.onMirrorMove = Symbol('onMirrorMove');
+const onScroll = exports.onScroll = Symbol('onScroll');
+const getAppendableContainer = exports.getAppendableContainer = Symbol('getAppendableContainer');
+
+/**
+ * Mirror default options
+ * @property {Object} defaultOptions
+ * @property {Boolean} defaultOptions.constrainDimensions
+ * @property {Boolean} defaultOptions.xAxis
+ * @property {Boolean} defaultOptions.yAxis
+ * @property {null} defaultOptions.cursorOffsetX
+ * @property {null} defaultOptions.cursorOffsetY
+ * @type {Object}
+ */
+const defaultOptions = exports.defaultOptions = {
+  constrainDimensions: false,
+  xAxis: true,
+  yAxis: true,
+  cursorOffsetX: null,
+  cursorOffsetY: null
+};
+
+/**
+ * Mirror plugin which controls the mirror positioning while dragging
+ * @class Mirror
+ * @module Mirror
+ * @extends AbstractPlugin
+ */
+class Mirror extends _AbstractPlugin2.default {
+  /**
+   * Mirror constructor.
+   * @constructs Mirror
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    super(draggable);
+
+    /**
+     * Mirror options
+     * @property {Object} options
+     * @property {Boolean} options.constrainDimensions
+     * @property {Boolean} options.xAxis
+     * @property {Boolean} options.yAxis
+     * @property {Number|null} options.cursorOffsetX
+     * @property {Number|null} options.cursorOffsetY
+     * @property {String|HTMLElement|Function} options.appendTo
+     * @type {Object}
+     */
+    this.options = _extends({}, defaultOptions, this.getOptions());
+
+    /**
+     * Scroll offset for touch devices because the mirror is positioned fixed
+     * @property {Object} scrollOffset
+     * @property {Number} scrollOffset.x
+     * @property {Number} scrollOffset.y
+     */
+    this.scrollOffset = { x: 0, y: 0 };
+
+    /**
+     * Initial scroll offset for touch devices because the mirror is positioned fixed
+     * @property {Object} scrollOffset
+     * @property {Number} scrollOffset.x
+     * @property {Number} scrollOffset.y
+     */
+    this.initialScrollOffset = {
+      x: window.scrollX,
+      y: window.scrollY
+    };
+
+    this[onDragStart] = this[onDragStart].bind(this);
+    this[onDragMove] = this[onDragMove].bind(this);
+    this[onDragStop] = this[onDragStop].bind(this);
+    this[onMirrorCreated] = this[onMirrorCreated].bind(this);
+    this[onMirrorMove] = this[onMirrorMove].bind(this);
+    this[onScroll] = this[onScroll].bind(this);
+  }
+
+  /**
+   * Attaches plugins event listeners
+   */
+  attach() {
+    this.draggable.on('drag:start', this[onDragStart]).on('drag:move', this[onDragMove]).on('drag:stop', this[onDragStop]).on('mirror:created', this[onMirrorCreated]).on('mirror:move', this[onMirrorMove]);
+  }
+
+  /**
+   * Detaches plugins event listeners
+   */
+  detach() {
+    this.draggable.off('drag:start', this[onDragStart]).off('drag:move', this[onDragMove]).off('drag:stop', this[onDragStop]).off('mirror:created', this[onMirrorCreated]).off('mirror:move', this[onMirrorMove]);
+  }
+
+  /**
+   * Returns options passed through draggable
+   * @return {Object}
+   */
+  getOptions() {
+    return this.draggable.options.mirror || {};
+  }
+
+  [onDragStart](dragEvent) {
+    if (dragEvent.canceled()) {
+      return;
+    }
+
+    if ('ontouchstart' in window) {
+      document.addEventListener('scroll', this[onScroll], true);
+    }
+
+    this.initialScrollOffset = {
+      x: window.scrollX,
+      y: window.scrollY
+    };
+
+    const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
+
+    const mirrorCreateEvent = new _MirrorEvent.MirrorCreateEvent({
+      source,
+      originalSource,
+      sourceContainer,
+      sensorEvent,
+      dragEvent
+    });
+
+    this.draggable.trigger(mirrorCreateEvent);
+
+    if (isNativeDragEvent(sensorEvent) || mirrorCreateEvent.canceled()) {
+      return;
+    }
+
+    const appendableContainer = this[getAppendableContainer](source) || sourceContainer;
+    this.mirror = source.cloneNode(true);
+
+    const mirrorCreatedEvent = new _MirrorEvent.MirrorCreatedEvent({
+      source,
+      originalSource,
+      sourceContainer,
+      sensorEvent,
+      dragEvent,
+      mirror: this.mirror
+    });
+
+    const mirrorAttachedEvent = new _MirrorEvent.MirrorAttachedEvent({
+      source,
+      originalSource,
+      sourceContainer,
+      sensorEvent,
+      dragEvent,
+      mirror: this.mirror
+    });
+
+    this.draggable.trigger(mirrorCreatedEvent);
+    appendableContainer.appendChild(this.mirror);
+    this.draggable.trigger(mirrorAttachedEvent);
+  }
+
+  [onDragMove](dragEvent) {
+    if (!this.mirror || dragEvent.canceled()) {
+      return;
+    }
+
+    const { source, originalSource, sourceContainer, sensorEvent } = dragEvent;
+
+    const mirrorMoveEvent = new _MirrorEvent.MirrorMoveEvent({
+      source,
+      originalSource,
+      sourceContainer,
+      sensorEvent,
+      dragEvent,
+      mirror: this.mirror
+    });
+
+    this.draggable.trigger(mirrorMoveEvent);
+  }
+
+  [onDragStop](dragEvent) {
+    if ('ontouchstart' in window) {
+      document.removeEventListener('scroll', this[onScroll], true);
+    }
+
+    this.initialScrollOffset = { x: 0, y: 0 };
+    this.scrollOffset = { x: 0, y: 0 };
+
+    if (!this.mirror) {
+      return;
+    }
+
+    const { source, sourceContainer, sensorEvent } = dragEvent;
+
+    const mirrorDestroyEvent = new _MirrorEvent.MirrorDestroyEvent({
+      source,
+      mirror: this.mirror,
+      sourceContainer,
+      sensorEvent,
+      dragEvent
+    });
+
+    this.draggable.trigger(mirrorDestroyEvent);
+
+    if (!mirrorDestroyEvent.canceled()) {
+      this.mirror.parentNode.removeChild(this.mirror);
+    }
+  }
+
+  [onScroll]() {
+    this.scrollOffset = {
+      x: window.scrollX - this.initialScrollOffset.x,
+      y: window.scrollY - this.initialScrollOffset.y
+    };
+  }
+
+  /**
+   * Mirror created handler
+   * @param {MirrorCreatedEvent} mirrorEvent
+   * @return {Promise}
+   * @private
+   */
+  [onMirrorCreated]({ mirror, source, sensorEvent }) {
+    const mirrorClass = this.draggable.getClassNameFor('mirror');
+
+    const setState = (_ref) => {
+      let { mirrorOffset, initialX, initialY } = _ref,
+          args = _objectWithoutProperties(_ref, ['mirrorOffset', 'initialX', 'initialY']);
+
+      this.mirrorOffset = mirrorOffset;
+      this.initialX = initialX;
+      this.initialY = initialY;
+      return _extends({ mirrorOffset, initialX, initialY }, args);
+    };
+
+    const initialState = {
+      mirror,
+      source,
+      sensorEvent,
+      mirrorClass,
+      scrollOffset: this.scrollOffset,
+      options: this.options
+    };
+
+    return Promise.resolve(initialState)
+    // Fix reflow here
+    .then(computeMirrorDimensions).then(calculateMirrorOffset).then(resetMirror).then(addMirrorClasses).then(positionMirror({ initial: true })).then(removeMirrorID).then(setState);
+  }
+
+  /**
+   * Mirror move handler
+   * @param {MirrorMoveEvent} mirrorEvent
+   * @return {Promise|null}
+   * @private
+   */
+  [onMirrorMove](mirrorEvent) {
+    if (mirrorEvent.canceled()) {
+      return null;
+    }
+
+    const initialState = {
+      mirror: mirrorEvent.mirror,
+      sensorEvent: mirrorEvent.sensorEvent,
+      mirrorOffset: this.mirrorOffset,
+      options: this.options,
+      initialX: this.initialX,
+      initialY: this.initialY,
+      scrollOffset: this.scrollOffset
+    };
+
+    return Promise.resolve(initialState).then(positionMirror({ raf: true }));
+  }
+
+  /**
+   * Returns appendable container for mirror based on the appendTo option
+   * @private
+   * @param {Object} options
+   * @param {HTMLElement} options.source - Current source
+   * @return {HTMLElement}
+   */
+  [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 source.parentNode;
+    }
+  }
+}
+
+exports.default = Mirror; /**
+                           * Computes mirror dimensions based on the source element
+                           * Adds sourceRect to state
+                           * @param {Object} state
+                           * @param {HTMLElement} state.source
+                           * @return {Promise}
+                           * @private
+                           */
+
+function computeMirrorDimensions(_ref2) {
+  let { source } = _ref2,
+      args = _objectWithoutProperties(_ref2, ['source']);
+
+  return withPromise(resolve => {
+    const sourceRect = source.getBoundingClientRect();
+    resolve(_extends({ source, sourceRect }, args));
+  });
+}
+
+/**
+ * Calculates mirror offset
+ * Adds mirrorOffset to state
+ * @param {Object} state
+ * @param {SensorEvent} state.sensorEvent
+ * @param {DOMRect} state.sourceRect
+ * @return {Promise}
+ * @private
+ */
+function calculateMirrorOffset(_ref3) {
+  let { sensorEvent, sourceRect, options } = _ref3,
+      args = _objectWithoutProperties(_ref3, ['sensorEvent', 'sourceRect', 'options']);
+
+  return withPromise(resolve => {
+    const top = options.cursorOffsetY === null ? sensorEvent.clientY - sourceRect.top : options.cursorOffsetY;
+    const left = options.cursorOffsetX === null ? sensorEvent.clientX - sourceRect.left : options.cursorOffsetX;
+
+    const mirrorOffset = { top, left };
+
+    resolve(_extends({ sensorEvent, sourceRect, mirrorOffset, options }, args));
+  });
+}
+
+/**
+ * Applys mirror styles
+ * @param {Object} state
+ * @param {HTMLElement} state.mirror
+ * @param {HTMLElement} state.source
+ * @param {Object} state.options
+ * @return {Promise}
+ * @private
+ */
+function resetMirror(_ref4) {
+  let { mirror, source, options } = _ref4,
+      args = _objectWithoutProperties(_ref4, ['mirror', 'source', 'options']);
+
+  return withPromise(resolve => {
+    let offsetHeight;
+    let offsetWidth;
+
+    if (options.constrainDimensions) {
+      const computedSourceStyles = getComputedStyle(source);
+      offsetHeight = computedSourceStyles.getPropertyValue('height');
+      offsetWidth = computedSourceStyles.getPropertyValue('width');
+    }
+
+    mirror.style.position = 'fixed';
+    mirror.style.pointerEvents = 'none';
+    mirror.style.top = 0;
+    mirror.style.left = 0;
+    mirror.style.margin = 0;
+
+    if (options.constrainDimensions) {
+      mirror.style.height = offsetHeight;
+      mirror.style.width = offsetWidth;
+    }
+
+    resolve(_extends({ mirror, source, options }, args));
+  });
+}
+
+/**
+ * Applys mirror class on mirror element
+ * @param {Object} state
+ * @param {HTMLElement} state.mirror
+ * @param {String} state.mirrorClass
+ * @return {Promise}
+ * @private
+ */
+function addMirrorClasses(_ref5) {
+  let { mirror, mirrorClass } = _ref5,
+      args = _objectWithoutProperties(_ref5, ['mirror', 'mirrorClass']);
+
+  return withPromise(resolve => {
+    mirror.classList.add(mirrorClass);
+    resolve(_extends({ mirror, mirrorClass }, args));
+  });
+}
+
+/**
+ * Removes source ID from cloned mirror element
+ * @param {Object} state
+ * @param {HTMLElement} state.mirror
+ * @return {Promise}
+ * @private
+ */
+function removeMirrorID(_ref6) {
+  let { mirror } = _ref6,
+      args = _objectWithoutProperties(_ref6, ['mirror']);
+
+  return withPromise(resolve => {
+    mirror.removeAttribute('id');
+    delete mirror.id;
+    resolve(_extends({ mirror }, args));
+  });
+}
+
+/**
+ * Positions mirror with translate3d
+ * @param {Object} state
+ * @param {HTMLElement} state.mirror
+ * @param {SensorEvent} state.sensorEvent
+ * @param {Object} state.mirrorOffset
+ * @param {Number} state.initialY
+ * @param {Number} state.initialX
+ * @param {Object} state.options
+ * @return {Promise}
+ * @private
+ */
+function positionMirror({ withFrame = false, initial = false } = {}) {
+  return (_ref7) => {
+    let { mirror, sensorEvent, mirrorOffset, initialY, initialX, scrollOffset, options } = _ref7,
+        args = _objectWithoutProperties(_ref7, ['mirror', 'sensorEvent', 'mirrorOffset', 'initialY', 'initialX', 'scrollOffset', 'options']);
+
+    return withPromise(resolve => {
+      const result = _extends({
+        mirror,
+        sensorEvent,
+        mirrorOffset,
+        options
+      }, args);
+
+      if (mirrorOffset) {
+        const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x;
+        const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y;
+
+        if (options.xAxis && options.yAxis || initial) {
+          mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+        } else if (options.xAxis && !options.yAxis) {
+          mirror.style.transform = `translate3d(${x}px, ${initialY}px, 0)`;
+        } else if (options.yAxis && !options.xAxis) {
+          mirror.style.transform = `translate3d(${initialX}px, ${y}px, 0)`;
+        }
+
+        if (initial) {
+          result.initialX = x;
+          result.initialY = y;
+        }
+      }
+
+      resolve(result);
+    }, { frame: withFrame });
+  };
+}
+
+/**
+ * Wraps functions in promise with potential animation frame option
+ * @param {Function} callback
+ * @param {Object} options
+ * @param {Boolean} options.raf
+ * @return {Promise}
+ * @private
+ */
+function withPromise(callback, { raf = false } = {}) {
+  return new Promise((resolve, reject) => {
+    if (raf) {
+      requestAnimationFrame(() => {
+        callback(resolve, reject);
+      });
+    } else {
+      callback(resolve, reject);
+    }
+  });
+}
+
+/**
+ * Returns true if the sensor event was triggered by a native browser drag event
+ * @param {SensorEvent} sensorEvent
+ */
+function isNativeDragEvent(sensorEvent) {
+  return (/^drag/.test(sensorEvent.originalEvent.type)
+  );
+}
+
+/***/ }),
+/* 57 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = undefined;
+
+var _Mirror = __webpack_require__(56);
+
+var _Mirror2 = _interopRequireDefault(_Mirror);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Mirror2.default;
+exports.defaultOptions = _Mirror.defaultOptions;
+
+/***/ }),
+/* 58 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _AbstractPlugin = __webpack_require__(1);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onInitialize = Symbol('onInitialize');
+const onDestroy = Symbol('onDestroy');
+
+/**
+ * Focusable default options
+ * @property {Object} defaultOptions
+ * @type {Object}
+ */
+const defaultOptions = {};
+
+/**
+ * Focusable plugin
+ * @class Focusable
+ * @module Focusable
+ * @extends AbstractPlugin
+ */
+class Focusable extends _AbstractPlugin2.default {
+  /**
+   * Focusable constructor.
+   * @constructs Focusable
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    super(draggable);
+
+    /**
+     * Focusable options
+     * @property {Object} options
+     * @type {Object}
+     */
+    this.options = _extends({}, defaultOptions, this.getOptions());
+
+    this[onInitialize] = this[onInitialize].bind(this);
+    this[onDestroy] = this[onDestroy].bind(this);
+  }
+
+  /**
+   * Attaches listeners to draggable
+   */
+  attach() {
+    this.draggable.on('draggable:initialize', this[onInitialize]).on('draggable:destroy', this[onDestroy]);
+  }
+
+  /**
+   * Detaches listeners from draggable
+   */
+  detach() {
+    this.draggable.off('draggable:initialize', this[onInitialize]).off('draggable:destroy', this[onDestroy]);
+  }
+
+  /**
+   * Returns options passed through draggable
+   * @return {Object}
+   */
+  getOptions() {
+    return this.draggable.options.focusable || {};
+  }
+
+  /**
+   * Returns draggable containers and elements
+   * @return {HTMLElement[]}
+   */
+  getElements() {
+    return [...this.draggable.containers, ...this.draggable.getDraggableElements()];
+  }
+
+  /**
+   * Intialize handler
+   * @private
+   */
+  [onInitialize]() {
+    // Can wait until the next best frame is available
+    requestAnimationFrame(() => {
+      this.getElements().forEach(element => decorateElement(element));
+    });
+  }
+
+  /**
+   * Destroy handler
+   * @private
+   */
+  [onDestroy]() {
+    // Can wait until the next best frame is available
+    requestAnimationFrame(() => {
+      this.getElements().forEach(element => stripElement(element));
+    });
+  }
+}
+
+exports.default = Focusable; /**
+                              * Keeps track of all the elements that are missing tabindex attributes
+                              * so they can be reset when draggable gets destroyed
+                              * @const {HTMLElement[]} elementsWithMissingTabIndex
+                              */
+
+const elementsWithMissingTabIndex = [];
+
+/**
+ * Decorates element with tabindex attributes
+ * @param {HTMLElement} element
+ * @return {Object}
+ * @private
+ */
+function decorateElement(element) {
+  const hasMissingTabIndex = Boolean(!element.getAttribute('tabindex') && element.tabIndex === -1);
+
+  if (hasMissingTabIndex) {
+    elementsWithMissingTabIndex.push(element);
+    element.tabIndex = 0;
+  }
+}
+
+/**
+ * Removes elements tabindex attributes
+ * @param {HTMLElement} element
+ * @private
+ */
+function stripElement(element) {
+  const tabIndexElementPosition = elementsWithMissingTabIndex.indexOf(element);
+
+  if (tabIndexElementPosition !== -1) {
+    element.tabIndex = -1;
+    elementsWithMissingTabIndex.splice(tabIndexElementPosition, 1);
+  }
+}
+
+/***/ }),
+/* 59 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Focusable = __webpack_require__(58);
+
+var _Focusable2 = _interopRequireDefault(_Focusable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Focusable2.default;
+
+/***/ }),
+/* 60 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/**
+ * All draggable plugins inherit from this class.
+ * @abstract
+ * @class AbstractPlugin
+ * @module AbstractPlugin
+ */
+class AbstractPlugin {
+  /**
+   * AbstractPlugin constructor.
+   * @constructs AbstractPlugin
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    /**
+     * Draggable instance
+     * @property draggable
+     * @type {Draggable}
+     */
+    this.draggable = draggable;
+  }
+
+  /**
+   * Override to add listeners
+   * @abstract
+   */
+  attach() {
+    throw new Error('Not Implemented');
+  }
+
+  /**
+   * Override to remove listeners
+   * @abstract
+   */
+  detach() {
+    throw new Error('Not Implemented');
+  }
+}
+exports.default = AbstractPlugin;
+
+/***/ }),
+/* 61 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _AbstractPlugin = __webpack_require__(1);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const onInitialize = Symbol('onInitialize');
+const onDestroy = Symbol('onDestroy');
+const announceEvent = Symbol('announceEvent');
+const announceMessage = Symbol('announceMessage');
+
+const ARIA_RELEVANT = 'aria-relevant';
+const ARIA_ATOMIC = 'aria-atomic';
+const ARIA_LIVE = 'aria-live';
+const ROLE = 'role';
+
+/**
+ * Announcement default options
+ * @property {Object} defaultOptions
+ * @property {Number} defaultOptions.expire
+ * @type {Object}
+ */
+const defaultOptions = exports.defaultOptions = {
+  expire: 7000
+};
+
+/**
+ * Announcement plugin
+ * @class Announcement
+ * @module Announcement
+ * @extends AbstractPlugin
+ */
+class Announcement extends _AbstractPlugin2.default {
+  /**
+   * Announcement constructor.
+   * @constructs Announcement
+   * @param {Draggable} draggable - Draggable instance
+   */
+  constructor(draggable) {
+    super(draggable);
+
+    /**
+     * Plugin options
+     * @property options
+     * @type {Object}
+     */
+    this.options = _extends({}, defaultOptions, this.getOptions());
+
+    /**
+     * Original draggable trigger method. Hack until we have onAll or on('all')
+     * @property originalTriggerMethod
+     * @type {Function}
+     */
+    this.originalTriggerMethod = this.draggable.trigger;
+
+    this[onInitialize] = this[onInitialize].bind(this);
+    this[onDestroy] = this[onDestroy].bind(this);
+  }
+
+  /**
+   * Attaches listeners to draggable
+   */
+  attach() {
+    this.draggable.on('draggable:initialize', this[onInitialize]);
+  }
+
+  /**
+   * Detaches listeners from draggable
+   */
+  detach() {
+    this.draggable.off('draggable:destroy', this[onDestroy]);
+  }
+
+  /**
+   * Returns passed in options
+   */
+  getOptions() {
+    return this.draggable.options.announcements || {};
+  }
+
+  /**
+   * Announces event
+   * @private
+   * @param {AbstractEvent} event
+   */
+  [announceEvent](event) {
+    const message = this.options[event.type];
+
+    if (message && typeof message === 'string') {
+      this[announceMessage](message);
+    }
+
+    if (message && typeof message === 'function') {
+      this[announceMessage](message(event));
+    }
+  }
+
+  /**
+   * Announces message to screen reader
+   * @private
+   * @param {String} message
+   */
+  [announceMessage](message) {
+    announce(message, { expire: this.options.expire });
+  }
+
+  /**
+   * Initialize hander
+   * @private
+   */
+  [onInitialize]() {
+    // Hack until there is an api for listening for all events
+    this.draggable.trigger = event => {
+      try {
+        this[announceEvent](event);
+      } finally {
+        // Ensure that original trigger is called
+        this.originalTriggerMethod.call(this.draggable, event);
+      }
+    };
+  }
+
+  /**
+   * Destroy hander
+   * @private
+   */
+  [onDestroy]() {
+    this.draggable.trigger = this.originalTriggerMethod;
+  }
+}
+
+exports.default = Announcement; /**
+                                 * @const {HTMLElement} liveRegion
+                                 */
+
+const liveRegion = createRegion();
+
+/**
+ * Announces message via live region
+ * @param {String} message
+ * @param {Object} options
+ * @param {Number} options.expire
+ */
+function announce(message, { expire }) {
+  const element = document.createElement('div');
+
+  element.textContent = message;
+  liveRegion.appendChild(element);
+
+  return setTimeout(() => {
+    liveRegion.removeChild(element);
+  }, expire);
+}
+
+/**
+ * Creates region element
+ * @return {HTMLElement}
+ */
+function createRegion() {
+  const element = document.createElement('div');
+
+  element.setAttribute('id', 'draggable-live-region');
+  element.setAttribute(ARIA_RELEVANT, 'additions');
+  element.setAttribute(ARIA_ATOMIC, 'true');
+  element.setAttribute(ARIA_LIVE, 'assertive');
+  element.setAttribute(ROLE, 'log');
+
+  element.style.position = 'fixed';
+  element.style.width = '1px';
+  element.style.height = '1px';
+  element.style.top = '-1px';
+  element.style.overflow = 'hidden';
+
+  return element;
+}
+
+// Append live region element as early as possible
+document.addEventListener('DOMContentLoaded', () => {
+  document.body.appendChild(liveRegion);
+});
+
+/***/ }),
+/* 62 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = undefined;
+
+var _Announcement = __webpack_require__(61);
+
+var _Announcement2 = _interopRequireDefault(_Announcement);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Announcement2.default;
+exports.defaultOptions = _Announcement.defaultOptions;
+
+/***/ }),
+/* 63 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableDestroyEvent = exports.DraggableInitializedEvent = exports.DraggableEvent = undefined;
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Base draggable event
+ * @class DraggableEvent
+ * @module DraggableEvent
+ * @extends AbstractEvent
+ */
+class DraggableEvent extends _AbstractEvent2.default {
+
+  /**
+   * Draggable instance
+   * @property draggable
+   * @type {Draggable}
+   * @readonly
+   */
+  get draggable() {
+    return this.data.draggable;
+  }
+}
+
+exports.DraggableEvent = DraggableEvent; /**
+                                          * Draggable initialized event
+                                          * @class DraggableInitializedEvent
+                                          * @module DraggableInitializedEvent
+                                          * @extends DraggableEvent
+                                          */
+
+DraggableEvent.type = 'draggable';
+class DraggableInitializedEvent extends DraggableEvent {}
+
+exports.DraggableInitializedEvent = DraggableInitializedEvent; /**
+                                                                * Draggable destory event
+                                                                * @class DraggableInitializedEvent
+                                                                * @module DraggableDestroyEvent
+                                                                * @extends DraggableDestroyEvent
+                                                                */
+
+DraggableInitializedEvent.type = 'draggable:initialize';
+class DraggableDestroyEvent extends DraggableEvent {}
+exports.DraggableDestroyEvent = DraggableDestroyEvent;
+DraggableDestroyEvent.type = 'draggable:destroy';
+
+/***/ }),
+/* 64 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+const canceled = Symbol('canceled');
+
+/**
+ * All events fired by draggable inherit this class. You can call `cancel()` to
+ * cancel a specific event or you can check if an event has been canceled by
+ * calling `canceled()`.
+ * @abstract
+ * @class AbstractEvent
+ * @module AbstractEvent
+ */
+class AbstractEvent {
+
+  /**
+   * AbstractEvent constructor.
+   * @constructs AbstractEvent
+   * @param {object} data - Event data
+   */
+
+  /**
+   * Event type
+   * @static
+   * @abstract
+   * @property type
+   * @type {String}
+   */
+  constructor(data) {
+    this[canceled] = false;
+    this.data = data;
+  }
+
+  /**
+   * Read-only type
+   * @abstract
+   * @return {String}
+   */
+
+
+  /**
+   * Event cancelable
+   * @static
+   * @abstract
+   * @property cancelable
+   * @type {Boolean}
+   */
+  get type() {
+    return this.constructor.type;
+  }
+
+  /**
+   * Read-only cancelable
+   * @abstract
+   * @return {Boolean}
+   */
+  get cancelable() {
+    return this.constructor.cancelable;
+  }
+
+  /**
+   * Cancels the event instance
+   * @abstract
+   */
+  cancel() {
+    this[canceled] = true;
+  }
+
+  /**
+   * Check if event has been canceled
+   * @abstract
+   * @return {Boolean}
+   */
+  canceled() {
+    return Boolean(this[canceled]);
+  }
+
+  /**
+   * Returns new event instance with existing event data.
+   * This method allows for overriding of event data.
+   * @param {Object} data
+   * @return {AbstractEvent}
+   */
+  clone(data) {
+    return new this.constructor(_extends({}, this.data, data));
+  }
+}
+exports.default = AbstractEvent;
+AbstractEvent.type = 'event';
+AbstractEvent.cancelable = false;
+
+/***/ }),
+/* 65 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragStopEvent = exports.DragPressureEvent = exports.DragOutContainerEvent = exports.DragOverContainerEvent = exports.DragOutEvent = exports.DragOverEvent = exports.DragMoveEvent = exports.DragStartEvent = exports.DragEvent = undefined;
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Base drag event
+ * @class DragEvent
+ * @module DragEvent
+ * @extends AbstractEvent
+ */
+class DragEvent extends _AbstractEvent2.default {
+
+  /**
+   * Draggables source element
+   * @property source
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get source() {
+    return this.data.source;
+  }
+
+  /**
+   * Draggables original source element
+   * @property originalSource
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get originalSource() {
+    return this.data.originalSource;
+  }
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get mirror() {
+    return this.data.mirror;
+  }
+
+  /**
+   * Draggables source container element
+   * @property sourceContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get sourceContainer() {
+    return this.data.sourceContainer;
+  }
+
+  /**
+   * Sensor event
+   * @property sensorEvent
+   * @type {SensorEvent}
+   * @readonly
+   */
+  get sensorEvent() {
+    return this.data.sensorEvent;
+  }
+
+  /**
+   * Original event that triggered sensor event
+   * @property originalEvent
+   * @type {Event}
+   * @readonly
+   */
+  get originalEvent() {
+    if (this.sensorEvent) {
+      return this.sensorEvent.originalEvent;
+    }
+
+    return null;
+  }
+}
+
+exports.DragEvent = DragEvent; /**
+                                * Drag start event
+                                * @class DragStartEvent
+                                * @module DragStartEvent
+                                * @extends DragEvent
+                                */
+
+DragEvent.type = 'drag';
+class DragStartEvent extends DragEvent {}
+
+exports.DragStartEvent = DragStartEvent; /**
+                                          * Drag move event
+                                          * @class DragMoveEvent
+                                          * @module DragMoveEvent
+                                          * @extends DragEvent
+                                          */
+
+DragStartEvent.type = 'drag:start';
+DragStartEvent.cancelable = true;
+class DragMoveEvent extends DragEvent {}
+
+exports.DragMoveEvent = DragMoveEvent; /**
+                                        * Drag over event
+                                        * @class DragOverEvent
+                                        * @module DragOverEvent
+                                        * @extends DragEvent
+                                        */
+
+DragMoveEvent.type = 'drag:move';
+class DragOverEvent extends DragEvent {
+
+  /**
+   * Draggable container you are over
+   * @property overContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get overContainer() {
+    return this.data.overContainer;
+  }
+
+  /**
+   * Draggable element you are over
+   * @property over
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get over() {
+    return this.data.over;
+  }
+}
+
+exports.DragOverEvent = DragOverEvent; /**
+                                        * Drag out event
+                                        * @class DragOutEvent
+                                        * @module DragOutEvent
+                                        * @extends DragEvent
+                                        */
+
+DragOverEvent.type = 'drag:over';
+DragOverEvent.cancelable = true;
+class DragOutEvent extends DragEvent {
+
+  /**
+   * Draggable container you are over
+   * @property overContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get overContainer() {
+    return this.data.overContainer;
+  }
+
+  /**
+   * Draggable element you left
+   * @property over
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get over() {
+    return this.data.over;
+  }
+}
+
+exports.DragOutEvent = DragOutEvent; /**
+                                      * Drag over container event
+                                      * @class DragOverContainerEvent
+                                      * @module DragOverContainerEvent
+                                      * @extends DragEvent
+                                      */
+
+DragOutEvent.type = 'drag:out';
+class DragOverContainerEvent extends DragEvent {
+
+  /**
+   * Draggable container you are over
+   * @property overContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get overContainer() {
+    return this.data.overContainer;
+  }
+}
+
+exports.DragOverContainerEvent = DragOverContainerEvent; /**
+                                                          * Drag out container event
+                                                          * @class DragOutContainerEvent
+                                                          * @module DragOutContainerEvent
+                                                          * @extends DragEvent
+                                                          */
+
+DragOverContainerEvent.type = 'drag:over:container';
+class DragOutContainerEvent extends DragEvent {
+
+  /**
+   * Draggable container you left
+   * @property overContainer
+   * @type {HTMLElement}
+   * @readonly
+   */
+  get overContainer() {
+    return this.data.overContainer;
+  }
+}
+
+exports.DragOutContainerEvent = DragOutContainerEvent; /**
+                                                        * Drag pressure event
+                                                        * @class DragPressureEvent
+                                                        * @module DragPressureEvent
+                                                        * @extends DragEvent
+                                                        */
+
+DragOutContainerEvent.type = 'drag:out:container';
+class DragPressureEvent extends DragEvent {
+
+  /**
+   * Pressure applied on draggable element
+   * @property pressure
+   * @type {Number}
+   * @readonly
+   */
+  get pressure() {
+    return this.data.pressure;
+  }
+}
+
+exports.DragPressureEvent = DragPressureEvent; /**
+                                                * Drag stop event
+                                                * @class DragStopEvent
+                                                * @module DragStopEvent
+                                                * @extends DragEvent
+                                                */
+
+DragPressureEvent.type = 'drag:pressure';
+class DragStopEvent extends DragEvent {}
+exports.DragStopEvent = DragStopEvent;
+DragStopEvent.type = 'drag:stop';
+
+/***/ }),
+/* 66 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Plugins = exports.Sensors = exports.Sortable = exports.Swappable = exports.Droppable = exports.Draggable = exports.BasePlugin = exports.BaseEvent = undefined;
+
+var _Draggable = __webpack_require__(5);
+
+Object.defineProperty(exports, 'Draggable', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Draggable).default;
+  }
+});
+
+var _Droppable = __webpack_require__(34);
+
+Object.defineProperty(exports, 'Droppable', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Droppable).default;
+  }
+});
+
+var _Swappable = __webpack_require__(31);
+
+Object.defineProperty(exports, 'Swappable', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Swappable).default;
+  }
+});
+
+var _Sortable = __webpack_require__(28);
+
+Object.defineProperty(exports, 'Sortable', {
+  enumerable: true,
+  get: function () {
+    return _interopRequireDefault(_Sortable).default;
+  }
+});
+
+var _AbstractEvent = __webpack_require__(0);
+
+var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);
+
+var _AbstractPlugin = __webpack_require__(1);
+
+var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
+
+var _Sensors = __webpack_require__(6);
+
+var Sensors = _interopRequireWildcard(_Sensors);
+
+var _Plugins = __webpack_require__(25);
+
+var Plugins = _interopRequireWildcard(_Plugins);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.BaseEvent = _AbstractEvent2.default;
+exports.BasePlugin = _AbstractPlugin2.default;
+exports.Sensors = Sensors;
+exports.Plugins = Plugins;
+
+/***/ })
+/******/ ]);
+});
\ No newline at end of file
diff --git a/oshipka/webapp/static/js/fuse.js b/oshipka/webapp/static/js/fuse.js
new file mode 100644
index 0000000..1a38491
--- /dev/null
+++ b/oshipka/webapp/static/js/fuse.js
@@ -0,0 +1,2162 @@
+/**
+ * Fuse.js v6.3.0 - Lightweight fuzzy-search (http://fusejs.io)
+ *
+ * Copyright (c) 2020 Kiro Risk (http://kiro.me)
+ * All Rights Reserved. Apache Software License 2.0
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.Fuse = factory());
+}(this, (function () { 'use strict';
+
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function (obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function (obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
+  }
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+
+    return target;
+  }
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+  }
+
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
+  function _isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
+    try {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  function _possibleConstructorReturn(self, call) {
+    if (call && (typeof call === "object" || typeof call === "function")) {
+      return call;
+    }
+
+    return _assertThisInitialized(self);
+  }
+
+  function _createSuper(Derived) {
+    var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+    return function _createSuperInternal() {
+      var Super = _getPrototypeOf(Derived),
+          result;
+
+      if (hasNativeReflectConstruct) {
+        var NewTarget = _getPrototypeOf(this).constructor;
+
+        result = Reflect.construct(Super, arguments, NewTarget);
+      } else {
+        result = Super.apply(this, arguments);
+      }
+
+      return _possibleConstructorReturn(this, result);
+    };
+  }
+
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function isArray(value) {
+    return !Array.isArray ? Object.prototype.toString.call(value) === '[object Array]' : Array.isArray(value);
+  } // Adapted from:
+  // https://github.com/lodash/lodash/blob/f4ca396a796435422bd4fd41fadbd225edddf175/.internal/baseToString.js
+
+  var INFINITY = 1 / 0;
+  function baseToString(value) {
+    // Exit early for strings to avoid a performance hit in some environments.
+    if (typeof value == 'string') {
+      return value;
+    }
+
+    var result = value + '';
+    return result == '0' && 1 / value == -INFINITY ? '-0' : result;
+  }
+  function toString(value) {
+    return value == null ? '' : baseToString(value);
+  }
+  function isString(value) {
+    return typeof value === 'string';
+  }
+  function isNumber(value) {
+    return typeof value === 'number';
+  }
+  function isObject(value) {
+    return _typeof(value) === 'object';
+  }
+  function isDefined(value) {
+    return value !== undefined && value !== null;
+  }
+  function isBlank(value) {
+    return !value.trim().length;
+  }
+
+  var EXTENDED_SEARCH_UNAVAILABLE = 'Extended search is not available';
+  var INCORRECT_INDEX_TYPE = "Incorrect 'index' type";
+  var LOGICAL_SEARCH_INVALID_QUERY_FOR_KEY = function LOGICAL_SEARCH_INVALID_QUERY_FOR_KEY(key) {
+    return "Invalid value for key ".concat(key);
+  };
+  var PATTERN_LENGTH_TOO_LARGE = function PATTERN_LENGTH_TOO_LARGE(max) {
+    return "Pattern length exceeds max of ".concat(max, ".");
+  };
+  var MISSING_KEY_PROPERTY = function MISSING_KEY_PROPERTY(name) {
+    return "Missing ".concat(name, " property in key");
+  };
+  var INVALID_KEY_WEIGHT_VALUE = function INVALID_KEY_WEIGHT_VALUE(key) {
+    return "Property 'weight' in key '".concat(key, "' must be a positive integer");
+  };
+
+  var hasOwn = Object.prototype.hasOwnProperty;
+
+  var KeyStore = /*#__PURE__*/function () {
+    function KeyStore(keys) {
+      var _this = this;
+
+      _classCallCheck(this, KeyStore);
+
+      this._keys = [];
+      this._keyMap = {};
+      var totalWeight = 0;
+      keys.forEach(function (key) {
+        var obj = createKey(key);
+        totalWeight += obj.weight;
+
+        _this._keys.push(obj);
+
+        _this._keyMap[obj.id] = obj;
+        totalWeight += obj.weight;
+      }); // Normalize weights so that their sum is equal to 1
+
+      this._keys.forEach(function (key) {
+        key.weight /= totalWeight;
+      });
+    }
+
+    _createClass(KeyStore, [{
+      key: "get",
+      value: function get(keyId) {
+        return this._keyMap[keyId];
+      }
+    }, {
+      key: "keys",
+      value: function keys() {
+        return this._keys;
+      }
+    }, {
+      key: "toJSON",
+      value: function toJSON() {
+        return JSON.stringify(this._keys);
+      }
+    }]);
+
+    return KeyStore;
+  }();
+  function createKey(key) {
+    var path = null;
+    var id = null;
+    var src = null;
+    var weight = 1;
+
+    if (isString(key) || isArray(key)) {
+      src = key;
+      path = createKeyPath(key);
+      id = createKeyId(key);
+    } else {
+      if (!hasOwn.call(key, 'name')) {
+        throw new Error(MISSING_KEY_PROPERTY('name'));
+      }
+
+      var name = key.name;
+      src = name;
+
+      if (hasOwn.call(key, 'weight')) {
+        weight = key.weight;
+
+        if (weight <= 0) {
+          throw new Error(INVALID_KEY_WEIGHT_VALUE(name));
+        }
+      }
+
+      path = createKeyPath(name);
+      id = createKeyId(name);
+    }
+
+    return {
+      path: path,
+      id: id,
+      weight: weight,
+      src: src
+    };
+  }
+  function createKeyPath(key) {
+    return isArray(key) ? key : key.split('.');
+  }
+  function createKeyId(key) {
+    return isArray(key) ? key.join('.') : key;
+  }
+
+  function get(obj, path) {
+    var list = [];
+    var arr = false;
+
+    var deepGet = function deepGet(obj, path, index) {
+      if (!path[index]) {
+        // If there's no path left, we've arrived at the object we care about.
+        list.push(obj);
+      } else {
+        var key = path[index];
+        var value = obj[key];
+
+        if (!isDefined(value)) {
+          return;
+        }
+
+        if (index === path.length - 1 && (isString(value) || isNumber(value))) {
+          list.push(toString(value));
+        } else if (isArray(value)) {
+          arr = true; // Search each item in the array.
+
+          for (var i = 0, len = value.length; i < len; i += 1) {
+            deepGet(value[i], path, index + 1);
+          }
+        } else if (path.length) {
+          // An object. Recurse further.
+          deepGet(value, path, index + 1);
+        }
+      }
+    };
+
+    deepGet(obj, path, 0);
+    return arr ? list : list[0];
+  }
+
+  var MatchOptions = {
+    // Whether the matches should be included in the result set. When `true`, each record in the result
+    // set will include the indices of the matched characters.
+    // These can consequently be used for highlighting purposes.
+    includeMatches: false,
+    // When `true`, the matching function will continue to the end of a search pattern even if
+    // a perfect match has already been located in the string.
+    findAllMatches: false,
+    // Minimum number of characters that must be matched before a result is considered a match
+    minMatchCharLength: 1
+  };
+  var BasicOptions = {
+    // When `true`, the algorithm continues searching to the end of the input even if a perfect
+    // match is found before the end of the same input.
+    isCaseSensitive: false,
+    // When true, the matching function will continue to the end of a search pattern even if
+    includeScore: false,
+    // List of properties that will be searched. This also supports nested properties.
+    keys: [],
+    // Whether to sort the result list, by score
+    shouldSort: true,
+    // Default sort function: sort by ascending score, ascending index
+    sortFn: function sortFn(a, b) {
+      return a.score === b.score ? a.idx < b.idx ? -1 : 1 : a.score < b.score ? -1 : 1;
+    }
+  };
+  var FuzzyOptions = {
+    // Approximately where in the text is the pattern expected to be found?
+    location: 0,
+    // At what point does the match algorithm give up. A threshold of '0.0' requires a perfect match
+    // (of both letters and location), a threshold of '1.0' would match anything.
+    threshold: 0.6,
+    // Determines how close the match must be to the fuzzy location (specified above).
+    // An exact letter match which is 'distance' characters away from the fuzzy location
+    // would score as a complete mismatch. A distance of '0' requires the match be at
+    // the exact location specified, a threshold of '1000' would require a perfect match
+    // to be within 800 characters of the fuzzy location to be found using a 0.8 threshold.
+    distance: 100
+  };
+  var AdvancedOptions = {
+    // When `true`, it enables the use of unix-like search commands
+    useExtendedSearch: false,
+    // The get function to use when fetching an object's properties.
+    // The default will search nested paths *ie foo.bar.baz*
+    getFn: get,
+    // When `true`, search will ignore `location` and `distance`, so it won't matter
+    // where in the string the pattern appears.
+    // More info: https://fusejs.io/concepts/scoring-theory.html#fuzziness-score
+    ignoreLocation: false,
+    // When `true`, the calculation for the relevance score (used for sorting) will
+    // ignore the field-length norm.
+    // More info: https://fusejs.io/concepts/scoring-theory.html#field-length-norm
+    ignoreFieldNorm: false
+  };
+  var Config = _objectSpread2({}, BasicOptions, {}, MatchOptions, {}, FuzzyOptions, {}, AdvancedOptions);
+
+  var SPACE = /[^ ]+/g; // Field-length norm: the shorter the field, the higher the weight.
+  // Set to 3 decimals to reduce index size.
+
+  function norm() {
+    var mantissa = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;
+    var cache = new Map();
+    return {
+      get: function get(value) {
+        var numTokens = value.match(SPACE).length;
+
+        if (cache.has(numTokens)) {
+          return cache.get(numTokens);
+        }
+
+        var n = parseFloat((1 / Math.sqrt(numTokens)).toFixed(mantissa));
+        cache.set(numTokens, n);
+        return n;
+      },
+      clear: function clear() {
+        cache.clear();
+      }
+    };
+  }
+
+  var FuseIndex = /*#__PURE__*/function () {
+    function FuseIndex() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref$getFn = _ref.getFn,
+          getFn = _ref$getFn === void 0 ? Config.getFn : _ref$getFn;
+
+      _classCallCheck(this, FuseIndex);
+
+      this.norm = norm(3);
+      this.getFn = getFn;
+      this.isCreated = false;
+      this.setIndexRecords();
+    }
+
+    _createClass(FuseIndex, [{
+      key: "setSources",
+      value: function setSources() {
+        var docs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        this.docs = docs;
+      }
+    }, {
+      key: "setIndexRecords",
+      value: function setIndexRecords() {
+        var records = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        this.records = records;
+      }
+    }, {
+      key: "setKeys",
+      value: function setKeys() {
+        var _this = this;
+
+        var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+        this.keys = keys;
+        this._keysMap = {};
+        keys.forEach(function (key, idx) {
+          _this._keysMap[key.id] = idx;
+        });
+      }
+    }, {
+      key: "create",
+      value: function create() {
+        var _this2 = this;
+
+        if (this.isCreated || !this.docs.length) {
+          return;
+        }
+
+        this.isCreated = true; // List is Array<String>
+
+        if (isString(this.docs[0])) {
+          this.docs.forEach(function (doc, docIndex) {
+            _this2._addString(doc, docIndex);
+          });
+        } else {
+          // List is Array<Object>
+          this.docs.forEach(function (doc, docIndex) {
+            _this2._addObject(doc, docIndex);
+          });
+        }
+
+        this.norm.clear();
+      } // Adds a doc to the end of the index
+
+    }, {
+      key: "add",
+      value: function add(doc) {
+        var idx = this.size();
+
+        if (isString(doc)) {
+          this._addString(doc, idx);
+        } else {
+          this._addObject(doc, idx);
+        }
+      } // Removes the doc at the specified index of the index
+
+    }, {
+      key: "removeAt",
+      value: function removeAt(idx) {
+        this.records.splice(idx, 1); // Change ref index of every subsquent doc
+
+        for (var i = idx, len = this.size(); i < len; i += 1) {
+          this.records[i].i -= 1;
+        }
+      }
+    }, {
+      key: "getValueForItemAtKeyId",
+      value: function getValueForItemAtKeyId(item, keyId) {
+        return item[this._keysMap[keyId]];
+      }
+    }, {
+      key: "size",
+      value: function size() {
+        return this.records.length;
+      }
+    }, {
+      key: "_addString",
+      value: function _addString(doc, docIndex) {
+        if (!isDefined(doc) || isBlank(doc)) {
+          return;
+        }
+
+        var record = {
+          v: doc,
+          i: docIndex,
+          n: this.norm.get(doc)
+        };
+        this.records.push(record);
+      }
+    }, {
+      key: "_addObject",
+      value: function _addObject(doc, docIndex) {
+        var _this3 = this;
+
+        var record = {
+          i: docIndex,
+          $: {}
+        }; // Iterate over every key (i.e, path), and fetch the value at that key
+
+        this.keys.forEach(function (key, keyIndex) {
+          // console.log(key)
+          var value = _this3.getFn(doc, key.path);
+
+          if (!isDefined(value)) {
+            return;
+          }
+
+          if (isArray(value)) {
+            (function () {
+              var subRecords = [];
+              var stack = [{
+                nestedArrIndex: -1,
+                value: value
+              }];
+
+              while (stack.length) {
+                var _stack$pop = stack.pop(),
+                    nestedArrIndex = _stack$pop.nestedArrIndex,
+                    _value = _stack$pop.value;
+
+                if (!isDefined(_value)) {
+                  continue;
+                }
+
+                if (isString(_value) && !isBlank(_value)) {
+                  var subRecord = {
+                    v: _value,
+                    i: nestedArrIndex,
+                    n: _this3.norm.get(_value)
+                  };
+                  subRecords.push(subRecord);
+                } else if (isArray(_value)) {
+                  _value.forEach(function (item, k) {
+                    stack.push({
+                      nestedArrIndex: k,
+                      value: item
+                    });
+                  });
+                }
+              }
+
+              record.$[keyIndex] = subRecords;
+            })();
+          } else if (!isBlank(value)) {
+            var subRecord = {
+              v: value,
+              n: _this3.norm.get(value)
+            };
+            record.$[keyIndex] = subRecord;
+          }
+        });
+        this.records.push(record);
+      }
+    }, {
+      key: "toJSON",
+      value: function toJSON() {
+        return {
+          keys: this.keys,
+          records: this.records
+        };
+      }
+    }]);
+
+    return FuseIndex;
+  }();
+  function createIndex(keys, docs) {
+    var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref2$getFn = _ref2.getFn,
+        getFn = _ref2$getFn === void 0 ? Config.getFn : _ref2$getFn;
+
+    var myIndex = new FuseIndex({
+      getFn: getFn
+    });
+    myIndex.setKeys(keys.map(createKey));
+    myIndex.setSources(docs);
+    myIndex.create();
+    return myIndex;
+  }
+  function parseIndex(data) {
+    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref3$getFn = _ref3.getFn,
+        getFn = _ref3$getFn === void 0 ? Config.getFn : _ref3$getFn;
+
+    var keys = data.keys,
+        records = data.records;
+    var myIndex = new FuseIndex({
+      getFn: getFn
+    });
+    myIndex.setKeys(keys);
+    myIndex.setIndexRecords(records);
+    return myIndex;
+  }
+
+  function transformMatches(result, data) {
+    var matches = result.matches;
+    data.matches = [];
+
+    if (!isDefined(matches)) {
+      return;
+    }
+
+    matches.forEach(function (match) {
+      if (!isDefined(match.indices) || !match.indices.length) {
+        return;
+      }
+
+      var indices = match.indices,
+          value = match.value;
+      var obj = {
+        indices: indices,
+        value: value
+      };
+
+      if (match.key) {
+        obj.key = match.key.src;
+      }
+
+      if (match.idx > -1) {
+        obj.refIndex = match.idx;
+      }
+
+      data.matches.push(obj);
+    });
+  }
+
+  function transformScore(result, data) {
+    data.score = result.score;
+  }
+
+  function computeScore(pattern) {
+    var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref$errors = _ref.errors,
+        errors = _ref$errors === void 0 ? 0 : _ref$errors,
+        _ref$currentLocation = _ref.currentLocation,
+        currentLocation = _ref$currentLocation === void 0 ? 0 : _ref$currentLocation,
+        _ref$expectedLocation = _ref.expectedLocation,
+        expectedLocation = _ref$expectedLocation === void 0 ? 0 : _ref$expectedLocation,
+        _ref$distance = _ref.distance,
+        distance = _ref$distance === void 0 ? Config.distance : _ref$distance,
+        _ref$ignoreLocation = _ref.ignoreLocation,
+        ignoreLocation = _ref$ignoreLocation === void 0 ? Config.ignoreLocation : _ref$ignoreLocation;
+
+    var accuracy = errors / pattern.length;
+
+    if (ignoreLocation) {
+      return accuracy;
+    }
+
+    var proximity = Math.abs(expectedLocation - currentLocation);
+
+    if (!distance) {
+      // Dodge divide by zero error.
+      return proximity ? 1.0 : accuracy;
+    }
+
+    return accuracy + proximity / distance;
+  }
+
+  function convertMaskToIndices() {
+    var matchmask = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var minMatchCharLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Config.minMatchCharLength;
+    var indices = [];
+    var start = -1;
+    var end = -1;
+    var i = 0;
+
+    for (var len = matchmask.length; i < len; i += 1) {
+      var match = matchmask[i];
+
+      if (match && start === -1) {
+        start = i;
+      } else if (!match && start !== -1) {
+        end = i - 1;
+
+        if (end - start + 1 >= minMatchCharLength) {
+          indices.push([start, end]);
+        }
+
+        start = -1;
+      }
+    } // (i-1 - start) + 1 => i - start
+
+
+    if (matchmask[i - 1] && i - start >= minMatchCharLength) {
+      indices.push([start, i - 1]);
+    }
+
+    return indices;
+  }
+
+  // Machine word size
+  var MAX_BITS = 32;
+
+  function search(text, pattern, patternAlphabet) {
+    var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+        _ref$location = _ref.location,
+        location = _ref$location === void 0 ? Config.location : _ref$location,
+        _ref$distance = _ref.distance,
+        distance = _ref$distance === void 0 ? Config.distance : _ref$distance,
+        _ref$threshold = _ref.threshold,
+        threshold = _ref$threshold === void 0 ? Config.threshold : _ref$threshold,
+        _ref$findAllMatches = _ref.findAllMatches,
+        findAllMatches = _ref$findAllMatches === void 0 ? Config.findAllMatches : _ref$findAllMatches,
+        _ref$minMatchCharLeng = _ref.minMatchCharLength,
+        minMatchCharLength = _ref$minMatchCharLeng === void 0 ? Config.minMatchCharLength : _ref$minMatchCharLeng,
+        _ref$includeMatches = _ref.includeMatches,
+        includeMatches = _ref$includeMatches === void 0 ? Config.includeMatches : _ref$includeMatches,
+        _ref$ignoreLocation = _ref.ignoreLocation,
+        ignoreLocation = _ref$ignoreLocation === void 0 ? Config.ignoreLocation : _ref$ignoreLocation;
+
+    if (pattern.length > MAX_BITS) {
+      throw new Error(PATTERN_LENGTH_TOO_LARGE(MAX_BITS));
+    }
+
+    var patternLen = pattern.length; // Set starting location at beginning text and initialize the alphabet.
+
+    var textLen = text.length; // Handle the case when location > text.length
+
+    var expectedLocation = Math.max(0, Math.min(location, textLen)); // Highest score beyond which we give up.
+
+    var currentThreshold = threshold; // Is there a nearby exact match? (speedup)
+
+    var bestLocation = expectedLocation; // Performance: only computer matches when the minMatchCharLength > 1
+    // OR if `includeMatches` is true.
+
+    var computeMatches = minMatchCharLength > 1 || includeMatches; // A mask of the matches, used for building the indices
+
+    var matchMask = computeMatches ? Array(textLen) : [];
+    var index; // Get all exact matches, here for speed up
+
+    while ((index = text.indexOf(pattern, bestLocation)) > -1) {
+      var score = computeScore(pattern, {
+        currentLocation: index,
+        expectedLocation: expectedLocation,
+        distance: distance,
+        ignoreLocation: ignoreLocation
+      });
+      currentThreshold = Math.min(score, currentThreshold);
+      bestLocation = index + patternLen;
+
+      if (computeMatches) {
+        var i = 0;
+
+        while (i < patternLen) {
+          matchMask[index + i] = 1;
+          i += 1;
+        }
+      }
+    } // Reset the best location
+
+
+    bestLocation = -1;
+    var lastBitArr = [];
+    var finalScore = 1;
+    var binMax = patternLen + textLen;
+    var mask = 1 << patternLen - 1;
+
+    for (var _i = 0; _i < patternLen; _i += 1) {
+      // Scan for the best match; each iteration allows for one more error.
+      // Run a binary search to determine how far from the match location we can stray
+      // at this error level.
+      var binMin = 0;
+      var binMid = binMax;
+
+      while (binMin < binMid) {
+        var _score2 = computeScore(pattern, {
+          errors: _i,
+          currentLocation: expectedLocation + binMid,
+          expectedLocation: expectedLocation,
+          distance: distance,
+          ignoreLocation: ignoreLocation
+        });
+
+        if (_score2 <= currentThreshold) {
+          binMin = binMid;
+        } else {
+          binMax = binMid;
+        }
+
+        binMid = Math.floor((binMax - binMin) / 2 + binMin);
+      } // Use the result from this iteration as the maximum for the next.
+
+
+      binMax = binMid;
+      var start = Math.max(1, expectedLocation - binMid + 1);
+      var finish = findAllMatches ? textLen : Math.min(expectedLocation + binMid, textLen) + patternLen; // Initialize the bit array
+
+      var bitArr = Array(finish + 2);
+      bitArr[finish + 1] = (1 << _i) - 1;
+
+      for (var j = finish; j >= start; j -= 1) {
+        var currentLocation = j - 1;
+        var charMatch = patternAlphabet[text.charAt(currentLocation)];
+
+        if (computeMatches) {
+          // Speed up: quick bool to int conversion (i.e, `charMatch ? 1 : 0`)
+          matchMask[currentLocation] = +!!charMatch;
+        } // First pass: exact match
+
+
+        bitArr[j] = (bitArr[j + 1] << 1 | 1) & charMatch; // Subsequent passes: fuzzy match
+
+        if (_i) {
+          bitArr[j] |= (lastBitArr[j + 1] | lastBitArr[j]) << 1 | 1 | lastBitArr[j + 1];
+        }
+
+        if (bitArr[j] & mask) {
+          finalScore = computeScore(pattern, {
+            errors: _i,
+            currentLocation: currentLocation,
+            expectedLocation: expectedLocation,
+            distance: distance,
+            ignoreLocation: ignoreLocation
+          }); // This match will almost certainly be better than any existing match.
+          // But check anyway.
+
+          if (finalScore <= currentThreshold) {
+            // Indeed it is
+            currentThreshold = finalScore;
+            bestLocation = currentLocation; // Already passed `loc`, downhill from here on in.
+
+            if (bestLocation <= expectedLocation) {
+              break;
+            } // When passing `bestLocation`, don't exceed our current distance from `expectedLocation`.
+
+
+            start = Math.max(1, 2 * expectedLocation - bestLocation);
+          }
+        }
+      } // No hope for a (better) match at greater error levels.
+
+
+      var _score = computeScore(pattern, {
+        errors: _i + 1,
+        currentLocation: expectedLocation,
+        expectedLocation: expectedLocation,
+        distance: distance,
+        ignoreLocation: ignoreLocation
+      });
+
+      if (_score > currentThreshold) {
+        break;
+      }
+
+      lastBitArr = bitArr;
+    }
+
+    var result = {
+      isMatch: bestLocation >= 0,
+      // Count exact matches (those with a score of 0) to be "almost" exact
+      score: Math.max(0.001, finalScore)
+    };
+
+    if (computeMatches) {
+      var indices = convertMaskToIndices(matchMask, minMatchCharLength);
+
+      if (!indices.length) {
+        result.isMatch = false;
+      } else if (includeMatches) {
+        result.indices = indices;
+      }
+    }
+
+    return result;
+  }
+
+  function createPatternAlphabet(pattern) {
+    var mask = {};
+
+    for (var i = 0, len = pattern.length; i < len; i += 1) {
+      var char = pattern.charAt(i);
+      mask[char] = (mask[char] || 0) | 1 << len - i - 1;
+    }
+
+    return mask;
+  }
+
+  var BitapSearch = /*#__PURE__*/function () {
+    function BitapSearch(pattern) {
+      var _this = this;
+
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref$location = _ref.location,
+          location = _ref$location === void 0 ? Config.location : _ref$location,
+          _ref$threshold = _ref.threshold,
+          threshold = _ref$threshold === void 0 ? Config.threshold : _ref$threshold,
+          _ref$distance = _ref.distance,
+          distance = _ref$distance === void 0 ? Config.distance : _ref$distance,
+          _ref$includeMatches = _ref.includeMatches,
+          includeMatches = _ref$includeMatches === void 0 ? Config.includeMatches : _ref$includeMatches,
+          _ref$findAllMatches = _ref.findAllMatches,
+          findAllMatches = _ref$findAllMatches === void 0 ? Config.findAllMatches : _ref$findAllMatches,
+          _ref$minMatchCharLeng = _ref.minMatchCharLength,
+          minMatchCharLength = _ref$minMatchCharLeng === void 0 ? Config.minMatchCharLength : _ref$minMatchCharLeng,
+          _ref$isCaseSensitive = _ref.isCaseSensitive,
+          isCaseSensitive = _ref$isCaseSensitive === void 0 ? Config.isCaseSensitive : _ref$isCaseSensitive,
+          _ref$ignoreLocation = _ref.ignoreLocation,
+          ignoreLocation = _ref$ignoreLocation === void 0 ? Config.ignoreLocation : _ref$ignoreLocation;
+
+      _classCallCheck(this, BitapSearch);
+
+      this.options = {
+        location: location,
+        threshold: threshold,
+        distance: distance,
+        includeMatches: includeMatches,
+        findAllMatches: findAllMatches,
+        minMatchCharLength: minMatchCharLength,
+        isCaseSensitive: isCaseSensitive,
+        ignoreLocation: ignoreLocation
+      };
+      this.pattern = isCaseSensitive ? pattern : pattern.toLowerCase();
+      this.chunks = [];
+
+      if (!this.pattern.length) {
+        return;
+      }
+
+      var addChunk = function addChunk(pattern, startIndex) {
+        _this.chunks.push({
+          pattern: pattern,
+          alphabet: createPatternAlphabet(pattern),
+          startIndex: startIndex
+        });
+      };
+
+      var len = this.pattern.length;
+
+      if (len > MAX_BITS) {
+        var i = 0;
+        var remainder = len % MAX_BITS;
+        var end = len - remainder;
+
+        while (i < end) {
+          addChunk(this.pattern.substr(i, MAX_BITS), i);
+          i += MAX_BITS;
+        }
+
+        if (remainder) {
+          var startIndex = len - MAX_BITS;
+          addChunk(this.pattern.substr(startIndex), startIndex);
+        }
+      } else {
+        addChunk(this.pattern, 0);
+      }
+    }
+
+    _createClass(BitapSearch, [{
+      key: "searchIn",
+      value: function searchIn(text) {
+        var _this$options = this.options,
+            isCaseSensitive = _this$options.isCaseSensitive,
+            includeMatches = _this$options.includeMatches;
+
+        if (!isCaseSensitive) {
+          text = text.toLowerCase();
+        } // Exact match
+
+
+        if (this.pattern === text) {
+          var _result = {
+            isMatch: true,
+            score: 0
+          };
+
+          if (includeMatches) {
+            _result.indices = [[0, text.length - 1]];
+          }
+
+          return _result;
+        } // Otherwise, use Bitap algorithm
+
+
+        var _this$options2 = this.options,
+            location = _this$options2.location,
+            distance = _this$options2.distance,
+            threshold = _this$options2.threshold,
+            findAllMatches = _this$options2.findAllMatches,
+            minMatchCharLength = _this$options2.minMatchCharLength,
+            ignoreLocation = _this$options2.ignoreLocation;
+        var allIndices = [];
+        var totalScore = 0;
+        var hasMatches = false;
+        this.chunks.forEach(function (_ref2) {
+          var pattern = _ref2.pattern,
+              alphabet = _ref2.alphabet,
+              startIndex = _ref2.startIndex;
+
+          var _search = search(text, pattern, alphabet, {
+            location: location + startIndex,
+            distance: distance,
+            threshold: threshold,
+            findAllMatches: findAllMatches,
+            minMatchCharLength: minMatchCharLength,
+            includeMatches: includeMatches,
+            ignoreLocation: ignoreLocation
+          }),
+              isMatch = _search.isMatch,
+              score = _search.score,
+              indices = _search.indices;
+
+          if (isMatch) {
+            hasMatches = true;
+          }
+
+          totalScore += score;
+
+          if (isMatch && indices) {
+            allIndices = [].concat(_toConsumableArray(allIndices), _toConsumableArray(indices));
+          }
+        });
+        var result = {
+          isMatch: hasMatches,
+          score: hasMatches ? totalScore / this.chunks.length : 1
+        };
+
+        if (hasMatches && includeMatches) {
+          result.indices = allIndices;
+        }
+
+        return result;
+      }
+    }]);
+
+    return BitapSearch;
+  }();
+
+  var BaseMatch = /*#__PURE__*/function () {
+    function BaseMatch(pattern) {
+      _classCallCheck(this, BaseMatch);
+
+      this.pattern = pattern;
+    }
+
+    _createClass(BaseMatch, [{
+      key: "search",
+      value: function search()
+      /*text*/
+      {}
+    }], [{
+      key: "isMultiMatch",
+      value: function isMultiMatch(pattern) {
+        return getMatch(pattern, this.multiRegex);
+      }
+    }, {
+      key: "isSingleMatch",
+      value: function isSingleMatch(pattern) {
+        return getMatch(pattern, this.singleRegex);
+      }
+    }]);
+
+    return BaseMatch;
+  }();
+
+  function getMatch(pattern, exp) {
+    var matches = pattern.match(exp);
+    return matches ? matches[1] : null;
+  }
+
+  var ExactMatch = /*#__PURE__*/function (_BaseMatch) {
+    _inherits(ExactMatch, _BaseMatch);
+
+    var _super = _createSuper(ExactMatch);
+
+    function ExactMatch(pattern) {
+      _classCallCheck(this, ExactMatch);
+
+      return _super.call(this, pattern);
+    }
+
+    _createClass(ExactMatch, [{
+      key: "search",
+      value: function search(text) {
+        var location = 0;
+        var index;
+        var indices = [];
+        var patternLen = this.pattern.length; // Get all exact matches
+
+        while ((index = text.indexOf(this.pattern, location)) > -1) {
+          location = index + patternLen;
+          indices.push([index, location - 1]);
+        }
+
+        var isMatch = !!indices.length;
+        return {
+          isMatch: isMatch,
+          score: isMatch ? 1 : 0,
+          indices: indices
+        };
+      }
+    }], [{
+      key: "type",
+      get: function get() {
+        return 'exact';
+      }
+    }, {
+      key: "multiRegex",
+      get: function get() {
+        return /^'"(.*)"$/;
+      }
+    }, {
+      key: "singleRegex",
+      get: function get() {
+        return /^'(.*)$/;
+      }
+    }]);
+
+    return ExactMatch;
+  }(BaseMatch);
+
+  var InverseExactMatch = /*#__PURE__*/function (_BaseMatch) {
+    _inherits(InverseExactMatch, _BaseMatch);
+
+    var _super = _createSuper(InverseExactMatch);
+
+    function InverseExactMatch(pattern) {
+      _classCallCheck(this, InverseExactMatch);
+
+      return _super.call(this, pattern);
+    }
+
+    _createClass(InverseExactMatch, [{
+      key: "search",
+      value: function search(text) {
+        var index = text.indexOf(this.pattern);
+        var isMatch = index === -1;
+        return {
+          isMatch: isMatch,
+          score: isMatch ? 0 : 1,
+          indices: [0, text.length - 1]
+        };
+      }
+    }], [{
+      key: "type",
+      get: function get() {
+        return 'inverse-exact';
+      }
+    }, {
+      key: "multiRegex",
+      get: function get() {
+        return /^!"(.*)"$/;
+      }
+    }, {
+      key: "singleRegex",
+      get: function get() {
+        return /^!(.*)$/;
+      }
+    }]);
+
+    return InverseExactMatch;
+  }(BaseMatch);
+
+  var PrefixExactMatch = /*#__PURE__*/function (_BaseMatch) {
+    _inherits(PrefixExactMatch, _BaseMatch);
+
+    var _super = _createSuper(PrefixExactMatch);
+
+    function PrefixExactMatch(pattern) {
+      _classCallCheck(this, PrefixExactMatch);
+
+      return _super.call(this, pattern);
+    }
+
+    _createClass(PrefixExactMatch, [{
+      key: "search",
+      value: function search(text) {
+        var isMatch = text.startsWith(this.pattern);
+        return {
+          isMatch: isMatch,
+          score: isMatch ? 0 : 1,
+          indices: [0, this.pattern.length - 1]
+        };
+      }
+    }], [{
+      key: "type",
+      get: function get() {
+        return 'prefix-exact';
+      }
+    }, {
+      key: "multiRegex",
+      get: function get() {
+        return /^\^"(.*)"$/;
+      }
+    }, {
+      key: "singleRegex",
+      get: function get() {
+        return /^\^(.*)$/;
+      }
+    }]);
+
+    return PrefixExactMatch;
+  }(BaseMatch);
+
+  var InversePrefixExactMatch = /*#__PURE__*/function (_BaseMatch) {
+    _inherits(InversePrefixExactMatch, _BaseMatch);
+
+    var _super = _createSuper(InversePrefixExactMatch);
+
+    function InversePrefixExactMatch(pattern) {
+      _classCallCheck(this, InversePrefixExactMatch);
+
+      return _super.call(this, pattern);
+    }
+
+    _createClass(InversePrefixExactMatch, [{
+      key: "search",
+      value: function search(text) {
+        var isMatch = !text.startsWith(this.pattern);
+        return {
+          isMatch: isMatch,
+          score: isMatch ? 0 : 1,
+          indices: [0, text.length - 1]
+        };
+      }
+    }], [{
+      key: "type",
+      get: function get() {
+        return 'inverse-prefix-exact';
+      }
+    }, {
+      key: "multiRegex",
+      get: function get() {
+        return /^!\^"(.*)"$/;
+      }
+    }, {
+      key: "singleRegex",
+      get: function get() {
+        return /^!\^(.*)$/;
+      }
+    }]);
+
+    return InversePrefixExactMatch;
+  }(BaseMatch);
+
+  var SuffixExactMatch = /*#__PURE__*/function (_BaseMatch) {
+    _inherits(SuffixExactMatch, _BaseMatch);
+
+    var _super = _createSuper(SuffixExactMatch);
+
+    function SuffixExactMatch(pattern) {
+      _classCallCheck(this, SuffixExactMatch);
+
+      return _super.call(this, pattern);
+    }
+
+    _createClass(SuffixExactMatch, [{
+      key: "search",
+      value: function search(text) {
+        var isMatch = text.endsWith(this.pattern);
+        return {
+          isMatch: isMatch,
+          score: isMatch ? 0 : 1,
+          indices: [text.length - this.pattern.length, text.length - 1]
+        };
+      }
+    }], [{
+      key: "type",
+      get: function get() {
+        return 'suffix-exact';
+      }
+    }, {
+      key: "multiRegex",
+      get: function get() {
+        return /^"(.*)"\$$/;
+      }
+    }, {
+      key: "singleRegex",
+      get: function get() {
+        return /^(.*)\$$/;
+      }
+    }]);
+
+    return SuffixExactMatch;
+  }(BaseMatch);
+
+  var InverseSuffixExactMatch = /*#__PURE__*/function (_BaseMatch) {
+    _inherits(InverseSuffixExactMatch, _BaseMatch);
+
+    var _super = _createSuper(InverseSuffixExactMatch);
+
+    function InverseSuffixExactMatch(pattern) {
+      _classCallCheck(this, InverseSuffixExactMatch);
+
+      return _super.call(this, pattern);
+    }
+
+    _createClass(InverseSuffixExactMatch, [{
+      key: "search",
+      value: function search(text) {
+        var isMatch = !text.endsWith(this.pattern);
+        return {
+          isMatch: isMatch,
+          score: isMatch ? 0 : 1,
+          indices: [0, text.length - 1]
+        };
+      }
+    }], [{
+      key: "type",
+      get: function get() {
+        return 'inverse-suffix-exact';
+      }
+    }, {
+      key: "multiRegex",
+      get: function get() {
+        return /^!"(.*)"\$$/;
+      }
+    }, {
+      key: "singleRegex",
+      get: function get() {
+        return /^!(.*)\$$/;
+      }
+    }]);
+
+    return InverseSuffixExactMatch;
+  }(BaseMatch);
+
+  var FuzzyMatch = /*#__PURE__*/function (_BaseMatch) {
+    _inherits(FuzzyMatch, _BaseMatch);
+
+    var _super = _createSuper(FuzzyMatch);
+
+    function FuzzyMatch(pattern) {
+      var _this;
+
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref$location = _ref.location,
+          location = _ref$location === void 0 ? Config.location : _ref$location,
+          _ref$threshold = _ref.threshold,
+          threshold = _ref$threshold === void 0 ? Config.threshold : _ref$threshold,
+          _ref$distance = _ref.distance,
+          distance = _ref$distance === void 0 ? Config.distance : _ref$distance,
+          _ref$includeMatches = _ref.includeMatches,
+          includeMatches = _ref$includeMatches === void 0 ? Config.includeMatches : _ref$includeMatches,
+          _ref$findAllMatches = _ref.findAllMatches,
+          findAllMatches = _ref$findAllMatches === void 0 ? Config.findAllMatches : _ref$findAllMatches,
+          _ref$minMatchCharLeng = _ref.minMatchCharLength,
+          minMatchCharLength = _ref$minMatchCharLeng === void 0 ? Config.minMatchCharLength : _ref$minMatchCharLeng,
+          _ref$isCaseSensitive = _ref.isCaseSensitive,
+          isCaseSensitive = _ref$isCaseSensitive === void 0 ? Config.isCaseSensitive : _ref$isCaseSensitive;
+
+      _classCallCheck(this, FuzzyMatch);
+
+      _this = _super.call(this, pattern);
+      _this._bitapSearch = new BitapSearch(pattern, {
+        location: location,
+        threshold: threshold,
+        distance: distance,
+        includeMatches: includeMatches,
+        findAllMatches: findAllMatches,
+        minMatchCharLength: minMatchCharLength,
+        isCaseSensitive: isCaseSensitive
+      });
+      return _this;
+    }
+
+    _createClass(FuzzyMatch, [{
+      key: "search",
+      value: function search(text) {
+        return this._bitapSearch.searchIn(text);
+      }
+    }], [{
+      key: "type",
+      get: function get() {
+        return 'fuzzy';
+      }
+    }, {
+      key: "multiRegex",
+      get: function get() {
+        return /^"(.*)"$/;
+      }
+    }, {
+      key: "singleRegex",
+      get: function get() {
+        return /^(.*)$/;
+      }
+    }]);
+
+    return FuzzyMatch;
+  }(BaseMatch);
+
+  var searchers = [ExactMatch, PrefixExactMatch, InversePrefixExactMatch, InverseSuffixExactMatch, SuffixExactMatch, InverseExactMatch, FuzzyMatch];
+  var searchersLen = searchers.length; // Regex to split by spaces, but keep anything in quotes together
+
+  var SPACE_RE = / +(?=([^\"]*\"[^\"]*\")*[^\"]*$)/;
+  var OR_TOKEN = '|'; // Return a 2D array representation of the query, for simpler parsing.
+  // Example:
+  // "^core go$ | rb$ | py$ xy$" => [["^core", "go$"], ["rb$"], ["py$", "xy$"]]
+
+  function parseQuery(pattern) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return pattern.split(OR_TOKEN).map(function (item) {
+      var query = item.trim().split(SPACE_RE).filter(function (item) {
+        return item && !!item.trim();
+      });
+      var results = [];
+
+      for (var i = 0, len = query.length; i < len; i += 1) {
+        var queryItem = query[i]; // 1. Handle multiple query match (i.e, once that are quoted, like `"hello world"`)
+
+        var found = false;
+        var idx = -1;
+
+        while (!found && ++idx < searchersLen) {
+          var searcher = searchers[idx];
+          var token = searcher.isMultiMatch(queryItem);
+
+          if (token) {
+            results.push(new searcher(token, options));
+            found = true;
+          }
+        }
+
+        if (found) {
+          continue;
+        } // 2. Handle single query matches (i.e, once that are *not* quoted)
+
+
+        idx = -1;
+
+        while (++idx < searchersLen) {
+          var _searcher = searchers[idx];
+
+          var _token = _searcher.isSingleMatch(queryItem);
+
+          if (_token) {
+            results.push(new _searcher(_token, options));
+            break;
+          }
+        }
+      }
+
+      return results;
+    });
+  }
+
+  // to a singl match
+
+  var MultiMatchSet = new Set([FuzzyMatch.type, ExactMatch.type]);
+  /**
+   * Command-like searching
+   * ======================
+   *
+   * Given multiple search terms delimited by spaces.e.g. `^jscript .python$ ruby !java`,
+   * search in a given text.
+   *
+   * Search syntax:
+   *
+   * | Token       | Match type                 | Description                            |
+   * | ----------- | -------------------------- | -------------------------------------- |
+   * | `jscript`   | fuzzy-match                | Items that match `jscript`             |
+   * | `'python`   | exact-match                | Items that include `python`            |
+   * | `!ruby`     | inverse-exact-match        | Items that do not include `ruby`       |
+   * | `^java`     | prefix-exact-match         | Items that start with `java`           |
+   * | `!^earlang` | inverse-prefix-exact-match | Items that do not start with `earlang` |
+   * | `.js$`      | suffix-exact-match         | Items that end with `.js`              |
+   * | `!.go$`     | inverse-suffix-exact-match | Items that do not end with `.go`       |
+   *
+   * A single pipe character acts as an OR operator. For example, the following
+   * query matches entries that start with `core` and end with either`go`, `rb`,
+   * or`py`.
+   *
+   * ```
+   * ^core go$ | rb$ | py$
+   * ```
+   */
+
+  var ExtendedSearch = /*#__PURE__*/function () {
+    function ExtendedSearch(pattern) {
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref$isCaseSensitive = _ref.isCaseSensitive,
+          isCaseSensitive = _ref$isCaseSensitive === void 0 ? Config.isCaseSensitive : _ref$isCaseSensitive,
+          _ref$includeMatches = _ref.includeMatches,
+          includeMatches = _ref$includeMatches === void 0 ? Config.includeMatches : _ref$includeMatches,
+          _ref$minMatchCharLeng = _ref.minMatchCharLength,
+          minMatchCharLength = _ref$minMatchCharLeng === void 0 ? Config.minMatchCharLength : _ref$minMatchCharLeng,
+          _ref$findAllMatches = _ref.findAllMatches,
+          findAllMatches = _ref$findAllMatches === void 0 ? Config.findAllMatches : _ref$findAllMatches,
+          _ref$location = _ref.location,
+          location = _ref$location === void 0 ? Config.location : _ref$location,
+          _ref$threshold = _ref.threshold,
+          threshold = _ref$threshold === void 0 ? Config.threshold : _ref$threshold,
+          _ref$distance = _ref.distance,
+          distance = _ref$distance === void 0 ? Config.distance : _ref$distance;
+
+      _classCallCheck(this, ExtendedSearch);
+
+      this.query = null;
+      this.options = {
+        isCaseSensitive: isCaseSensitive,
+        includeMatches: includeMatches,
+        minMatchCharLength: minMatchCharLength,
+        findAllMatches: findAllMatches,
+        location: location,
+        threshold: threshold,
+        distance: distance
+      };
+      this.pattern = isCaseSensitive ? pattern : pattern.toLowerCase();
+      this.query = parseQuery(this.pattern, this.options);
+    }
+
+    _createClass(ExtendedSearch, [{
+      key: "searchIn",
+      value: function searchIn(text) {
+        var query = this.query;
+
+        if (!query) {
+          return {
+            isMatch: false,
+            score: 1
+          };
+        }
+
+        var _this$options = this.options,
+            includeMatches = _this$options.includeMatches,
+            isCaseSensitive = _this$options.isCaseSensitive;
+        text = isCaseSensitive ? text : text.toLowerCase();
+        var numMatches = 0;
+        var allIndices = [];
+        var totalScore = 0; // ORs
+
+        for (var i = 0, qLen = query.length; i < qLen; i += 1) {
+          var searchers = query[i]; // Reset indices
+
+          allIndices.length = 0;
+          numMatches = 0; // ANDs
+
+          for (var j = 0, pLen = searchers.length; j < pLen; j += 1) {
+            var searcher = searchers[j];
+
+            var _searcher$search = searcher.search(text),
+                isMatch = _searcher$search.isMatch,
+                indices = _searcher$search.indices,
+                score = _searcher$search.score;
+
+            if (isMatch) {
+              numMatches += 1;
+              totalScore += score;
+
+              if (includeMatches) {
+                var type = searcher.constructor.type;
+
+                if (MultiMatchSet.has(type)) {
+                  allIndices = [].concat(_toConsumableArray(allIndices), _toConsumableArray(indices));
+                } else {
+                  allIndices.push(indices);
+                }
+              }
+            } else {
+              totalScore = 0;
+              numMatches = 0;
+              allIndices.length = 0;
+              break;
+            }
+          } // OR condition, so if TRUE, return
+
+
+          if (numMatches) {
+            var result = {
+              isMatch: true,
+              score: totalScore / numMatches
+            };
+
+            if (includeMatches) {
+              result.indices = allIndices;
+            }
+
+            return result;
+          }
+        } // Nothing was matched
+
+
+        return {
+          isMatch: false,
+          score: 1
+        };
+      }
+    }], [{
+      key: "condition",
+      value: function condition(_, options) {
+        return options.useExtendedSearch;
+      }
+    }]);
+
+    return ExtendedSearch;
+  }();
+
+  var registeredSearchers = [];
+  function register() {
+    registeredSearchers.push.apply(registeredSearchers, arguments);
+  }
+  function createSearcher(pattern, options) {
+    for (var i = 0, len = registeredSearchers.length; i < len; i += 1) {
+      var searcherClass = registeredSearchers[i];
+
+      if (searcherClass.condition(pattern, options)) {
+        return new searcherClass(pattern, options);
+      }
+    }
+
+    return new BitapSearch(pattern, options);
+  }
+
+  var LogicalOperator = {
+    AND: '$and',
+    OR: '$or'
+  };
+  var KeyType = {
+    PATH: '$path',
+    PATTERN: '$val'
+  };
+
+  var isExpression = function isExpression(query) {
+    return !!(query[LogicalOperator.AND] || query[LogicalOperator.OR]);
+  };
+
+  var isPath = function isPath(query) {
+    return !!query[KeyType.PATH];
+  };
+
+  var isLeaf = function isLeaf(query) {
+    return !isArray(query) && isObject(query) && !isExpression(query);
+  };
+
+  var convertToExplicit = function convertToExplicit(query) {
+    return _defineProperty({}, LogicalOperator.AND, Object.keys(query).map(function (key) {
+      return _defineProperty({}, key, query[key]);
+    }));
+  }; // When `auto` is `true`, the parse function will infer and initialize and add
+  // the appropriate `Searcher` instance
+
+
+  function parse(query, options) {
+    var _ref3 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref3$auto = _ref3.auto,
+        auto = _ref3$auto === void 0 ? true : _ref3$auto;
+
+    var next = function next(query) {
+      var keys = Object.keys(query);
+      var isQueryPath = isPath(query);
+
+      if (!isQueryPath && keys.length > 1 && !isExpression(query)) {
+        return next(convertToExplicit(query));
+      }
+
+      if (isLeaf(query)) {
+        var key = isQueryPath ? query[KeyType.PATH] : keys[0];
+        var pattern = isQueryPath ? query[KeyType.PATTERN] : query[key];
+
+        if (!isString(pattern)) {
+          throw new Error(LOGICAL_SEARCH_INVALID_QUERY_FOR_KEY(key));
+        }
+
+        var obj = {
+          keyId: createKeyId(key),
+          pattern: pattern
+        };
+
+        if (auto) {
+          obj.searcher = createSearcher(pattern, options);
+        }
+
+        return obj;
+      }
+
+      var node = {
+        children: [],
+        operator: keys[0]
+      };
+      keys.forEach(function (key) {
+        var value = query[key];
+
+        if (isArray(value)) {
+          value.forEach(function (item) {
+            node.children.push(next(item));
+          });
+        }
+      });
+      return node;
+    };
+
+    if (!isExpression(query)) {
+      query = convertToExplicit(query);
+    }
+
+    return next(query);
+  }
+
+  var Fuse = /*#__PURE__*/function () {
+    function Fuse(docs) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var index = arguments.length > 2 ? arguments[2] : undefined;
+
+      _classCallCheck(this, Fuse);
+
+      this.options = _objectSpread2({}, Config, {}, options);
+
+      if (this.options.useExtendedSearch && !true) {
+        throw new Error(EXTENDED_SEARCH_UNAVAILABLE);
+      }
+
+      this._keyStore = new KeyStore(this.options.keys);
+      this.setCollection(docs, index);
+    }
+
+    _createClass(Fuse, [{
+      key: "setCollection",
+      value: function setCollection(docs, index) {
+        this._docs = docs;
+
+        if (index && !(index instanceof FuseIndex)) {
+          throw new Error(INCORRECT_INDEX_TYPE);
+        }
+
+        this._myIndex = index || createIndex(this.options.keys, this._docs, {
+          getFn: this.options.getFn
+        });
+      }
+    }, {
+      key: "add",
+      value: function add(doc) {
+        if (!isDefined(doc)) {
+          return;
+        }
+
+        this._docs.push(doc);
+
+        this._myIndex.add(doc);
+      }
+    }, {
+      key: "remove",
+      value: function remove() {
+        var predicate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
+          return (
+            /* doc, idx */
+            false
+          );
+        };
+        var results = [];
+
+        for (var i = 0, len = this._docs.length; i < len; i += 1) {
+          var doc = this._docs[i];
+
+          if (predicate(doc, i)) {
+            this.removeAt(i);
+            i -= 1;
+            results.push(doc);
+          }
+        }
+
+        return results;
+      }
+    }, {
+      key: "removeAt",
+      value: function removeAt(idx) {
+        this._docs.splice(idx, 1);
+
+        this._myIndex.removeAt(idx);
+      }
+    }, {
+      key: "getIndex",
+      value: function getIndex() {
+        return this._myIndex;
+      }
+    }, {
+      key: "search",
+      value: function search(query) {
+        var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+            _ref$limit = _ref.limit,
+            limit = _ref$limit === void 0 ? -1 : _ref$limit;
+
+        var _this$options = this.options,
+            includeMatches = _this$options.includeMatches,
+            includeScore = _this$options.includeScore,
+            shouldSort = _this$options.shouldSort,
+            sortFn = _this$options.sortFn,
+            ignoreFieldNorm = _this$options.ignoreFieldNorm;
+        var results = isString(query) ? isString(this._docs[0]) ? this._searchStringList(query) : this._searchObjectList(query) : this._searchLogical(query);
+        computeScore$1(results, this._keyStore, {
+          ignoreFieldNorm: ignoreFieldNorm
+        });
+
+        if (shouldSort) {
+          results.sort(sortFn);
+        }
+
+        if (isNumber(limit) && limit > -1) {
+          results = results.slice(0, limit);
+        }
+
+        return format(results, this._docs, {
+          includeMatches: includeMatches,
+          includeScore: includeScore
+        });
+      }
+    }, {
+      key: "_searchStringList",
+      value: function _searchStringList(query) {
+        var searcher = createSearcher(query, this.options);
+        var records = this._myIndex.records;
+        var results = []; // Iterate over every string in the index
+
+        records.forEach(function (_ref2) {
+          var text = _ref2.v,
+              idx = _ref2.i,
+              norm = _ref2.n;
+
+          if (!isDefined(text)) {
+            return;
+          }
+
+          var _searcher$searchIn = searcher.searchIn(text),
+              isMatch = _searcher$searchIn.isMatch,
+              score = _searcher$searchIn.score,
+              indices = _searcher$searchIn.indices;
+
+          if (isMatch) {
+            results.push({
+              item: text,
+              idx: idx,
+              matches: [{
+                score: score,
+                value: text,
+                norm: norm,
+                indices: indices
+              }]
+            });
+          }
+        });
+        return results;
+      }
+    }, {
+      key: "_searchLogical",
+      value: function _searchLogical(query) {
+        var _this = this;
+
+        var expression = parse(query, this.options);
+        var records = this._myIndex.records;
+        var resultMap = {};
+        var results = [];
+
+        var evaluateExpression = function evaluateExpression(node, item, idx) {
+          if (node.children) {
+            var operator = node.operator;
+            var res = [];
+
+            for (var k = 0; k < node.children.length; k += 1) {
+              var child = node.children[k];
+              var matches = evaluateExpression(child, item, idx);
+
+              if (matches && matches.length) {
+                res.push({
+                  idx: idx,
+                  item: item,
+                  matches: matches
+                });
+
+                if (operator === LogicalOperator.OR) {
+                  // Short-circuit
+                  break;
+                }
+              } else if (operator === LogicalOperator.AND) {
+                res.length = 0; // Short-circuit
+
+                break;
+              }
+            }
+
+            return res;
+          } else {
+            var keyId = node.keyId,
+                searcher = node.searcher;
+
+            var value = _this._myIndex.getValueForItemAtKeyId(item, keyId);
+
+            return _this._findMatches({
+              key: _this._keyStore.get(keyId),
+              value: value,
+              searcher: searcher
+            });
+          }
+        };
+
+        records.forEach(function (_ref3) {
+          var item = _ref3.$,
+              idx = _ref3.i;
+
+          if (isDefined(item)) {
+            var expResults = evaluateExpression(expression, item, idx);
+
+            if (expResults.length) {
+              // Dedupe when adding
+              if (!resultMap[idx]) {
+                resultMap[idx] = {
+                  idx: idx,
+                  item: item,
+                  matches: []
+                };
+                results.push(resultMap[idx]);
+              }
+
+              expResults.forEach(function (_ref4) {
+                var _resultMap$idx$matche;
+
+                var matches = _ref4.matches;
+
+                (_resultMap$idx$matche = resultMap[idx].matches).push.apply(_resultMap$idx$matche, _toConsumableArray(matches));
+              });
+            }
+          }
+        });
+        return results;
+      }
+    }, {
+      key: "_searchObjectList",
+      value: function _searchObjectList(query) {
+        var _this2 = this;
+
+        var searcher = createSearcher(query, this.options);
+        var _this$_myIndex = this._myIndex,
+            keys = _this$_myIndex.keys,
+            records = _this$_myIndex.records;
+        var results = []; // List is Array<Object>
+
+        records.forEach(function (_ref5) {
+          var item = _ref5.$,
+              idx = _ref5.i;
+
+          if (!isDefined(item)) {
+            return;
+          }
+
+          var matches = []; // Iterate over every key (i.e, path), and fetch the value at that key
+
+          keys.forEach(function (key, keyIndex) {
+            matches.push.apply(matches, _toConsumableArray(_this2._findMatches({
+              key: key,
+              value: item[keyIndex],
+              searcher: searcher
+            })));
+          });
+
+          if (matches.length) {
+            results.push({
+              idx: idx,
+              item: item,
+              matches: matches
+            });
+          }
+        });
+        return results;
+      }
+    }, {
+      key: "_findMatches",
+      value: function _findMatches(_ref6) {
+        var key = _ref6.key,
+            value = _ref6.value,
+            searcher = _ref6.searcher;
+
+        if (!isDefined(value)) {
+          return [];
+        }
+
+        var matches = [];
+
+        if (isArray(value)) {
+          value.forEach(function (_ref7) {
+            var text = _ref7.v,
+                idx = _ref7.i,
+                norm = _ref7.n;
+
+            if (!isDefined(text)) {
+              return;
+            }
+
+            var _searcher$searchIn2 = searcher.searchIn(text),
+                isMatch = _searcher$searchIn2.isMatch,
+                score = _searcher$searchIn2.score,
+                indices = _searcher$searchIn2.indices;
+
+            if (isMatch) {
+              matches.push({
+                score: score,
+                key: key,
+                value: text,
+                idx: idx,
+                norm: norm,
+                indices: indices
+              });
+            }
+          });
+        } else {
+          var text = value.v,
+              norm = value.n;
+
+          var _searcher$searchIn3 = searcher.searchIn(text),
+              isMatch = _searcher$searchIn3.isMatch,
+              score = _searcher$searchIn3.score,
+              indices = _searcher$searchIn3.indices;
+
+          if (isMatch) {
+            matches.push({
+              score: score,
+              key: key,
+              value: text,
+              norm: norm,
+              indices: indices
+            });
+          }
+        }
+
+        return matches;
+      }
+    }]);
+
+    return Fuse;
+  }(); // Practical scoring function
+
+  function computeScore$1(results, keyStore, _ref8) {
+    var _ref8$ignoreFieldNorm = _ref8.ignoreFieldNorm,
+        ignoreFieldNorm = _ref8$ignoreFieldNorm === void 0 ? Config.ignoreFieldNorm : _ref8$ignoreFieldNorm;
+    results.forEach(function (result) {
+      var totalScore = 1;
+      result.matches.forEach(function (_ref9) {
+        var key = _ref9.key,
+            norm = _ref9.norm,
+            score = _ref9.score;
+        var weight = key ? key.weight : null;
+        totalScore *= Math.pow(score === 0 && weight ? Number.EPSILON : score, (weight || 1) * (ignoreFieldNorm ? 1 : norm));
+      });
+      result.score = totalScore;
+    });
+  }
+
+  function format(results, docs) {
+    var _ref10 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref10$includeMatches = _ref10.includeMatches,
+        includeMatches = _ref10$includeMatches === void 0 ? Config.includeMatches : _ref10$includeMatches,
+        _ref10$includeScore = _ref10.includeScore,
+        includeScore = _ref10$includeScore === void 0 ? Config.includeScore : _ref10$includeScore;
+
+    var transformers = [];
+    if (includeMatches) transformers.push(transformMatches);
+    if (includeScore) transformers.push(transformScore);
+    return results.map(function (result) {
+      var idx = result.idx;
+      var data = {
+        item: docs[idx],
+        refIndex: idx
+      };
+
+      if (transformers.length) {
+        transformers.forEach(function (transformer) {
+          transformer(result, data);
+        });
+      }
+
+      return data;
+    });
+  }
+
+  Fuse.version = '6.3.0';
+  Fuse.createIndex = createIndex;
+  Fuse.parseIndex = parseIndex;
+  Fuse.config = Config;
+
+  {
+    Fuse.parseQuery = parse;
+  }
+
+  {
+    register(ExtendedSearch);
+  }
+
+  return Fuse;
+
+})));
diff --git a/oshipka/webapp/static/js/oshipka.js b/oshipka/webapp/static/js/oshipka.js
index 59d8342..95fff41 100644
--- a/oshipka/webapp/static/js/oshipka.js
+++ b/oshipka/webapp/static/js/oshipka.js
@@ -12,4 +12,65 @@ function start_async_task(task_name, data, ondata) {
             }
         }
     })
+}
+
+function createSearch(options) {
+    /**
+     * options:
+     * - searchElSel - element (usually input) that will be used to take query from
+     * - filterElSel - elements that will be shown/hidden depending on query match
+     * - filterElDataName - [default: searchable-content] the name of the data element that will contain the search document
+     * - resultsElSel - [default: false] results element to display instead of in-place
+     * - resultsElTitle - [default: <h3>Results</h3>] - title to show if there are results and there is resultsElSel
+     * - fuseOptions - options to pass to fuse search
+     * @type {*|string}
+     */
+    let searchElSel = options.searchElSel || "#input-search";
+    let filterElSel = options.filterElSel || "#elements-to-filter-list";
+    let resultsElSel = options.resultsElSel || false;
+    let resultsElTitle = options.resultsElSel || "<h3>Results</h3>";
+    let filterElDataName = options.filterElDataName || "searchable-content";
+    let fuseOptions = options.fuseOptions || {
+        includeScore: true,
+    }
+
+    let inputEl = $(searchElSel);
+    let elements = $(filterElSel);
+    let resultsEl = $(resultsElSel)
+    let documents = $.map(elements, function (el) {
+        return $(el).data(filterElDataName)
+    });
+    const fuse = new Fuse(documents, fuseOptions)
+
+    return {
+        search: function () {
+            let query = inputEl.val();
+            if (query === "") {
+                return;
+            }
+            let results = fuse.search(query);
+            let showElIds = $.map(results, function (r) {
+                return r.refIndex
+            });
+            if (resultsEl) {
+                $(resultsEl).html(resultsElTitle);
+                $(elements).hide();
+            } else {
+                $(resultsEl).hide();
+                $.each($(elements), function (el) {
+                    $(el).show();
+                });
+            }
+            $.each(elements, function (elId, el) {
+                if (showElIds.includes(elId)) {
+                    $(el).show();
+                    if (resultsEl) {
+                        $(resultsEl).append($(el));
+                    }
+                } else {
+                    $(el).hide();
+                }
+            })
+        }
+    }
 }
\ No newline at end of file
diff --git a/oshipka/webapp/views.py b/oshipka/webapp/views.py
index db18448..128535e 100644
--- a/oshipka/webapp/views.py
+++ b/oshipka/webapp/views.py
@@ -1,4 +1,5 @@
 import importlib
+from copy import deepcopy, copy
 from functools import wraps
 
 import inflect
@@ -95,9 +96,9 @@ def _update_m_ns(vc, m_ns):
 
 def default_create_func(vc):
     m_ns = _filter_m_n(vc)
-    instance = vc.model_view.model(**vc.serialized_args)
+    instance = vc.instances or vc.model_view.model(**vc.serialized_args)
     vc.instance = instance
-    vc.instances = [instance]
+    vc.instances = instance
     _update_m_ns(vc, m_ns)
     db.session.add(instance)
 
@@ -142,7 +143,7 @@ class ViewContext(object):
                  jsonify_func=None, render_func=None, template_func=None, template_ctx_func=None,
                  should_redirect_no_instances_func=None,
                  should_redirect_at_end_func=None,
-                 json=False, **kwargs):
+                 is_json=False, **kwargs):
         self.args_get_func = args_get_func or default_get_args_func
         self.args_process_func = args_process_func or default_none_func
         self.filter_func = filter_func or default_none_func
@@ -158,24 +159,24 @@ class ViewContext(object):
         self.template_func = template_func or default_none_func
         self.template_ctx_func = template_ctx_func or default_none_func
         self.should_redirect_at_end_func = should_redirect_at_end_func or default_none_func
-        self.json = json
+        self.is_json = is_json
 
         self.serialized_args = {}
         self.url_args = {}
         self.instances = []
         self.should_execute = True
-        self.should_redirect_at_end = True
+        self.should_redirect_at_end = not is_json
         self.template = None
         self.template_ctx = {}
         self.model_view = None
         self.redirect_next = None
 
 
-def create_view(model_view, view_context, is_json=False, **kwargs):
+def create_view(model_view, view_context, **kwargs):
     view_context.model_view = model_view
 
     def return_json_or_template():
-        if is_json:
+        if view_context.is_json:
             return view_context.jsonify_func(view_context)
         view_context.template_func(view_context)
         view_context.template_ctx_func(view_context)
@@ -196,7 +197,10 @@ def create_view(model_view, view_context, is_json=False, **kwargs):
 
         view_context.should_execute_func(view_context)
         if not view_context.should_execute:
-            return view_context.redirect_func(view_context)
+            if view_context.is_json:
+                return view_context.jsonify_func(view_context)
+            else:
+                return view_context.redirect_func(view_context)
 
         view_context.execute_func(view_context)
         view_context.post_execute_func(view_context)
@@ -235,7 +239,10 @@ class ModelView(object):
         view_func = url_args.pop('view_func')
         self.app.add_url_rule(rule=url, endpoint=endpoint,
                               view_func=view_func(self, **kwargs), **url_args)
-        kwargs['is_json'] = True
+
+        view_context_kwargs = copy(kwargs['view_context'].__dict__)
+        view_context_kwargs['is_json'] = True
+        kwargs['view_context'] = ViewContext(**view_context_kwargs)
         self.app.add_url_rule(rule=api_url, endpoint=api_endpoint,
                               view_func=view_func(self, **kwargs), **url_args)