vue-draggable - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

lib/vue-draggable.js

@@ -99,7 +99,7 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-/***/ "./src/index.js":
-/*!**********************!*\
-  !*** ./src/index.js ***!
-  \**********************/
-/*! exports provided: VueDraggableDirective, default */
+/***/ "./src/core/helpers/dom.helper.js":
+/*!****************************************!*\
+  !*** ./src/core/helpers/dom.helper.js ***!
+  \****************************************/
+/*! exports provided: getDroptargets, getDraggables, setInitialAtributes, removeOldDropzoneAreaElements, getContainer, addDropeffects, clearDropeffects, hasModifier */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -109,32 +109,105 @@
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VueDraggableDirective", function() { return VueDraggableDirective; });
-/* harmony import */ var _vue_draggable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./vue-draggable */ "./src/vue-draggable.js");
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDroptargets", function() { return getDroptargets; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDraggables", function() { return getDraggables; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setInitialAtributes", function() { return setInitialAtributes; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeOldDropzoneAreaElements", function() { return removeOldDropzoneAreaElements; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getContainer", function() { return getContainer; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addDropeffects", function() { return addDropeffects; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "clearDropeffects", function() { return clearDropeffects; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasModifier", function() { return hasModifier; });
+var getDroptargets = function getDroptargets(el) {
+  return el.querySelectorAll(this.defaultOptions.dropzoneSelector);
+};
+var getDraggables = function getDraggables(el) {
+  return el.querySelectorAll(this.defaultOptions.draggableSelector);
+};
+var setInitialAtributes = function setInitialAtributes(el) {
+  this.targets = getDroptargets.bind(this)(el);
+  this.items = getDraggables.bind(this)(el);
 
-var VueDraggableDirective = {
-  bind: function bind(el, options) {
-    // override default options
-    Object.assign(_vue_draggable__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].defaultOptions, options.value);
-    _vue_draggable__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].registerListeners(el);
-    _vue_draggable__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].initiate(el);
-  },
-  componentUpdated: function componentUpdated(el) {
-    setTimeout(function () {
-      _vue_draggable__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].initiate(el);
-    });
+  for (var i = 0; i < this.targets.length; i++) {
+    this.targets[i].setAttribute('aria-dropeffect', 'none');
   }
+
+  for (var _i = 0; _i < this.items.length; _i++) {
+    this.items[_i].setAttribute('draggable', 'true');
+
+    this.items[_i].setAttribute('aria-grabbed', 'false');
+
+    this.items[_i].setAttribute('tabindex', '0');
+  }
 };
+var removeOldDropzoneAreaElements = function removeOldDropzoneAreaElements() {
+  var oldItemDropzoneElements = document.querySelectorAll('.item-dropzone-area');
 
-_vue_draggable__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].install = function (Vue) {
-  Vue.directive('drag-and-drop', VueDraggableDirective);
+  for (var i = 0; i < oldItemDropzoneElements.length; i++) {
+    oldItemDropzoneElements[i].remove();
+  }
 };
+var getContainer = function getContainer(element) {
+  var containerElement = element;
 
-/* harmony default export */ __webpack_exports__["default"] = (_vue_draggable__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"]);
+  do {
+    if (containerElement && containerElement.nodeType === 1 && containerElement.getAttribute('aria-dropeffect')) {
+      return containerElement;
+    }
+  } while (containerElement = containerElement ? containerElement.parentNode : null);
 
+  return null;
+};
+var addDropeffects = function addDropeffects(items, selections, targets) {
+  // apply aria-dropeffect and tabindex to all targets apart from the owner
+  for (var len = targets.length, i = 0; i < len; i++) {
+    if (targets[i] !== selections.owner && targets[i].getAttribute('aria-dropeffect') === 'none') {
+      targets[i].setAttribute('aria-dropeffect', 'move');
+      targets[i].setAttribute('tabindex', '0');
+    }
+  } // remove aria-grabbed and tabindex from all items inside those containers
+
+
+  for (var _len = items.length, _i2 = 0; _i2 < _len; _i2++) {
+    if (items[_i2].parentNode !== selections.owner && items[_i2].getAttribute('aria-grabbed')) {
+      items[_i2].removeAttribute('aria-grabbed');
+
+      items[_i2].removeAttribute('tabindex');
+    }
+  }
+};
+var clearDropeffects = function clearDropeffects(items, selections, targets) {
+  // if we dont't have any selected items just skip
+  if (!selections.items.length) {
+    return;
+  } // reset aria-dropeffect and remove tabindex from all targets
+
+
+  for (var i = 0; i < targets.length; i++) {
+    if (targets[i].getAttribute('aria-dropeffect') !== 'none') {
+      targets[i].setAttribute('aria-dropeffect', 'none');
+      targets[i].removeAttribute('tabindex');
+    }
+  } // restore aria-grabbed and tabindex to all selectable items
+  // without changing the grabbed value of any existing selected items
+
+
+  for (var _i3 = 0; _i3 < items.length; _i3++) {
+    if (!items[_i3].getAttribute('aria-grabbed')) {
+      items[_i3].setAttribute('aria-grabbed', 'false');
+
+      items[_i3].setAttribute('tabindex', '0');
+    } else if (items[_i3].getAttribute('aria-grabbed') === 'true') {
+      items[_i3].setAttribute('tabindex', '0');
+    }
+  }
+};
+var hasModifier = function hasModifier(e) {
+  return e.ctrlKey || e.metaKey || e.shiftKey;
+};
+
 /***/ }),
 
-/***/ "./src/vue-draggable-methods.js":
-/*!**************************************!*\
-  !*** ./src/vue-draggable-methods.js ***!
-  \**************************************/
-/*! exports provided: VueDraggableMethods */
+/***/ "./src/core/helpers/index.js":
+/*!***********************************!*\
+  !*** ./src/core/helpers/index.js ***!
+  \***********************************/
+/*! exports provided: getDroptargets, getDraggables, setInitialAtributes, removeOldDropzoneAreaElements, getContainer, addDropeffects, clearDropeffects, hasModifier, addSelection, removeSelection, clearSelections, stopDragAndDrop */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -144,7 +217,46 @@
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VueDraggableMethods", function() { return VueDraggableMethods; });
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+/* harmony import */ var _dom_helper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./dom.helper */ "./src/core/helpers/dom.helper.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getDroptargets", function() { return _dom_helper__WEBPACK_IMPORTED_MODULE_0__["getDroptargets"]; });
 
-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; }
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getDraggables", function() { return _dom_helper__WEBPACK_IMPORTED_MODULE_0__["getDraggables"]; });
 
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "setInitialAtributes", function() { return _dom_helper__WEBPACK_IMPORTED_MODULE_0__["setInitialAtributes"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "removeOldDropzoneAreaElements", function() { return _dom_helper__WEBPACK_IMPORTED_MODULE_0__["removeOldDropzoneAreaElements"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getContainer", function() { return _dom_helper__WEBPACK_IMPORTED_MODULE_0__["getContainer"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "addDropeffects", function() { return _dom_helper__WEBPACK_IMPORTED_MODULE_0__["addDropeffects"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "clearDropeffects", function() { return _dom_helper__WEBPACK_IMPORTED_MODULE_0__["clearDropeffects"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "hasModifier", function() { return _dom_helper__WEBPACK_IMPORTED_MODULE_0__["hasModifier"]; });
+
+/* harmony import */ var _state_helper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./state.helper */ "./src/core/helpers/state.helper.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "addSelection", function() { return _state_helper__WEBPACK_IMPORTED_MODULE_1__["addSelection"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "removeSelection", function() { return _state_helper__WEBPACK_IMPORTED_MODULE_1__["removeSelection"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "clearSelections", function() { return _state_helper__WEBPACK_IMPORTED_MODULE_1__["clearSelections"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "stopDragAndDrop", function() { return _state_helper__WEBPACK_IMPORTED_MODULE_1__["stopDragAndDrop"]; });
+
+
+
+
+/***/ }),
+
+/***/ "./src/core/helpers/state.helper.js":
+/*!******************************************!*\
+  !*** ./src/core/helpers/state.helper.js ***!
+  \******************************************/
+/*! exports provided: addSelection, removeSelection, clearSelections, stopDragAndDrop */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addSelection", function() { return addSelection; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeSelection", function() { return removeSelection; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "clearSelections", function() { return clearSelections; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "stopDragAndDrop", function() { return stopDragAndDrop; });
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -158,491 +270,583 @@
 
-var VueDraggableMethods = {
-  stopDragAndDrop: function stopDragAndDrop() {
-    // throw exception and catch this to stop further d&d
-    throw new Error('Requested D&D stop...');
-  },
-  isOldBrowser: function isOldBrowser() {
-    return !document.querySelectorAll || !('draggable' in document.createElement('span')) || window.opera;
-  },
-  addSelection: function addSelection(item) {
-    // if the owner reference is still null, set it to this item's parent
-    // so that further selection is only allowed within the same container
-    if (!this.selections.owner) {
-      this.selections.owner = item.parentNode;
-    } // or if that's already happened then compare it with this item's parent
-    // and if they're not the same container, return to prevent selection
+var addSelection = function addSelection(item) {
+  // if the owner reference is still null, set it to this item's parent
+  // so that further selection is only allowed within the same container
+  if (!this.selections.owner) {
+    this.selections.owner = item.parentNode;
+  } // or if that's already happened then compare it with this item's parent
+  // and if they're not the same container, return to prevent selection
 
 
-    if (!this.defaultOptions.multipleDropzonesItemsDraggingEnabled && this.selections.owner !== item.parentNode) {
-      return;
-    } // set this item's grabbed state
+  if (!this.defaultOptions.multipleDropzonesItemsDraggingEnabled && this.selections.owner !== item.parentNode) {
+    return;
+  } // set this item's grabbed state
 
 
-    item.setAttribute('aria-grabbed', 'true'); // add it to the items array
+  item.setAttribute('aria-grabbed', 'true'); // add it to the items array
 
-    this.selections.items = _toConsumableArray(this.selections.items).concat([item]);
-  },
-  removeSelection: function removeSelection(item) {
-    // reset this item's grabbed state
-    item.setAttribute('aria-grabbed', 'false'); // then find and remove this item from the existing items array
+  this.selections.items = _toConsumableArray(this.selections.items).concat([item]);
+};
+var removeSelection = function removeSelection(item) {
+  // reset this item's grabbed state
+  item.setAttribute('aria-grabbed', 'false'); // then find and remove this item from the existing items array
 
-    for (var i = 0; i < this.selections.items.length; i++) {
-      if (this.selections.items[i] === item) {
-        this.selections.items.splice(i, 1);
-        break;
-      }
+  for (var i = 0; i < this.selections.items.length; i++) {
+    if (this.selections.items[i] === item) {
+      this.selections.items.splice(i, 1);
+      break;
     }
-  },
-  clearSelections: function clearSelections() {
-    // if we have any selected items
-    if (this.selections.items.length) {
-      // reset the owner reference
-      this.selections.owner = null; // reset the grabbed state on every selected item
+  }
+};
+var clearSelections = function clearSelections() {
+  // if we have any selected items
+  if (this.selections.items.length) {
+    // reset the owner reference
+    this.selections.owner = null; // reset the grabbed state on every selected item
 
-      for (var i = 0; i < this.selections.items.length; i++) {
-        this.selections.items[i].setAttribute('aria-grabbed', 'false');
-      } // then reset the items array
+    for (var i = 0; i < this.selections.items.length; i++) {
+      this.selections.items[i].setAttribute('aria-grabbed', 'false');
+    } // then reset the items array
 
 
-      this.selections.items = [];
-    }
-  },
-  hasModifier: function hasModifier(e) {
-    return e.ctrlKey || e.metaKey || e.shiftKey;
-  },
-  addDropeffects: function addDropeffects() {
-    // apply aria-dropeffect and tabindex to all targets apart from the owner
-    for (var len = this.targets.length, i = 0; i < len; i++) {
-      if (this.targets[i] !== this.selections.owner && this.targets[i].getAttribute('aria-dropeffect') === 'none') {
-        this.targets[i].setAttribute('aria-dropeffect', 'move');
-        this.targets[i].setAttribute('tabindex', '0');
-      }
-    } // remove aria-grabbed and tabindex from all items inside those containers
+    this.selections.items = [];
+  }
+};
+var stopDragAndDrop = function stopDragAndDrop() {
+  // throw exception and catch this to stop further d&d
+  throw new Error('Requested D&D stop...');
+};
 
+/***/ }),
 
-    for (var _len = this.items.length, _i = 0; _i < _len; _i++) {
-      if (this.items[_i].parentNode !== this.selections.owner && this.items[_i].getAttribute('aria-grabbed')) {
-        this.items[_i].removeAttribute('aria-grabbed');
+/***/ "./src/core/index.js":
+/*!***************************!*\
+  !*** ./src/core/index.js ***!
+  \***************************/
+/*! exports provided: VueDraggable */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-        this.items[_i].removeAttribute('tabindex');
-      }
-    }
-  },
-  clearDropeffects: function clearDropeffects() {
-    // if we have any selected items
-    if (this.selections.items.length) {
-      // reset aria-dropeffect and remove tabindex from all targets
-      for (var i = 0; i < this.targets.length; i++) {
-        if (this.targets[i].getAttribute('aria-dropeffect') !== 'none') {
-          this.targets[i].setAttribute('aria-dropeffect', 'none');
-          this.targets[i].removeAttribute('tabindex');
-        }
-      } // restore aria-grabbed and tabindex to all selectable items
-      // without changing the grabbed value of any existing selected items
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VueDraggable", function() { return VueDraggable; });
+/* harmony import */ var _listeners__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./listeners */ "./src/core/listeners/index.js");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers */ "./src/core/helpers/index.js");
+/* harmony import */ var _options__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./options */ "./src/core/options.js");
+/* harmony import */ var _state__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./state */ "./src/core/state.js");
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
+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; }
 
-      for (var _i2 = 0; _i2 < this.items.length; _i2++) {
-        if (!this.items[_i2].getAttribute('aria-grabbed')) {
-          this.items[_i2].setAttribute('aria-grabbed', 'false');
 
-          this.items[_i2].setAttribute('tabindex', '0');
-        } else if (this.items[_i2].getAttribute('aria-grabbed') === 'true') {
-          this.items[_i2].setAttribute('tabindex', '0');
-        }
-      }
-    }
-  },
-  getContainer: function getContainer(element) {
-    var containerElement = element;
 
-    do {
-      if (containerElement && containerElement.nodeType === 1 && containerElement.getAttribute('aria-dropeffect')) {
-        return containerElement;
-      }
-    } while (containerElement = containerElement ? containerElement.parentNode : null);
 
-    return null;
-  },
-  removeOldDropzoneAreaElements: function removeOldDropzoneAreaElements() {
-    var oldItemDropzoneElements = document.querySelectorAll('.item-dropzone-area');
 
-    for (var i = 0; i < oldItemDropzoneElements.length; i++) {
-      oldItemDropzoneElements[i].remove();
-    }
+var VueDraggable = _objectSpread({}, _options__WEBPACK_IMPORTED_MODULE_2__["VueDraggableOptions"], _state__WEBPACK_IMPORTED_MODULE_3__["VueDraggableState"], {
+  registerListeners: function registerListeners(el) {
+    _listeners__WEBPACK_IMPORTED_MODULE_0__["attachListeners"].bind(this)(el);
   },
-  registerListeners: function registerListeners(el) {
-    var _this = this;
+  initiate: function initiate(el) {
+    _helpers__WEBPACK_IMPORTED_MODULE_1__["setInitialAtributes"].bind(this)(el);
+  }
+});
 
-    if (this.defaultOptions.excludeOlderBrowsers && this.isOldBrowser()) {
+/***/ }),
+
+/***/ "./src/core/listeners/handlers/dragend.handler.js":
+/*!********************************************************!*\
+  !*** ./src/core/listeners/handlers/dragend.handler.js ***!
+  \********************************************************/
+/*! exports provided: dragendHandler */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "dragendHandler", function() { return dragendHandler; });
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../../helpers */ "./src/core/helpers/index.js");
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+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; }
+
+
+var dragendHandler = function dragendHandler(e) {
+  if (typeof this.defaultOptions.onDragend === 'function') {
+    try {
+      this.defaultOptions.onDragend(_objectSpread({
+        nativeEvent: e,
+        stop: _helpers__WEBPACK_IMPORTED_MODULE_0__["stopDragAndDrop"]
+      }, this.selections));
+    } catch (error) {
+      Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["removeOldDropzoneAreaElements"])();
       return;
     }
+  } // if we have a valid drop target reference
+  // (which implies that we have some selected items)
 
-    el.addEventListener('mousedown', function (e) {
-      var elem = e.target.closest(_this.defaultOptions.draggableSelector); // if the element is a draggable item
 
-      if (elem && elem.getAttribute('draggable')) {
-        // clear dropeffect from the target containers
-        _this.clearDropeffects(); // if the multiple selection modifier is not pressed
-        // and the item's grabbed state is currently false
+  if (this.selections.droptarget) {
+    // append the selected items to the end of the target container
+    for (var i = 0; i < this.selections.items.length; i++) {
+      if (this.nextItemElement) {
+        this.selections.droptarget.insertBefore(this.selections.items[i], this.nextItemElement);
+        continue;
+      }
 
+      this.selections.droptarget.appendChild(this.selections.items[i]);
+    }
 
-        if (!_this.hasModifier(e) && elem.getAttribute('aria-grabbed') === 'false') {
-          // clear all existing selections
-          _this.clearSelections(); // then add this new selection
+    if (typeof this.defaultOptions.onDrop === 'function') {
+      this.defaultOptions.onDrop(_objectSpread({
+        nativeEvent: e,
+        stop: function stop() {
+          throw new Error("Stop method is available only for callbacks\n                    'onDragstart' and 'onDragend'. For more info look at\n                    https://github.com/Vivify-Ideas/vue-draggable/blob/master/README.md\n                  ");
+        }
+      }, this.selections));
+    } // prevent default to allow the action
 
 
-          _this.addSelection(elem);
-        }
-      } else if (!_this.hasModifier(e)) {
-        // else [if the element is anything else]
-        // and the selection modifier is not pressed
-        // clear dropeffect from the target containers
-        _this.clearDropeffects(); // clear all existing selections
+    e.preventDefault();
+  } // if we have any selected items
 
 
-        _this.clearSelections();
-      } else {
-        // else [if the element is anything else and the modifier is pressed]
-        // clear dropeffect from the target containers
-        _this.clearDropeffects();
-      }
-    }, false); // mouseup event to implement multiple selection
+  if (this.selections.items.length) {
+    // clear dropeffect from the target containers
+    Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["clearDropeffects"])(this.items, this.selections, this.targets); // if we have a valid drop target reference
 
-    el.addEventListener('mouseup', function (e) {
-      var elem = e.target.closest(_this.defaultOptions.draggableSelector); // if the element is a draggable item
-      // and the multipler selection modifier is pressed
+    if (this.selections.droptarget) {
+      // reset the selections array
+      _helpers__WEBPACK_IMPORTED_MODULE_0__["clearSelections"].bind(this)(); // reset the target's dragover class
 
-      if (elem && elem.getAttribute('draggable') && _this.hasModifier(e)) {
-        // if the item's grabbed state is currently true
-        if (elem.getAttribute('aria-grabbed') === 'true') {
-          // unselect this item
-          _this.removeSelection(elem); // if that was the only selected item
-          // then reset the owner container reference
+      this.selections.droptarget.className = this.selections.droptarget.className.replace(/ dragover/g, ''); // reset the target reference
 
+      this.selections.droptarget = null;
+    }
+  } // dropzone area elements
 
-          if (!_this.selections.items.length) {
-            _this.selections.owner = null;
-          }
-        } else {
-          // else [if the item's grabbed state is false]
-          // add this additional selection
-          _this.addSelection(elem);
-        }
-      }
-    }, false); // dragstart event to initiate mouse dragging
 
-    el.addEventListener('dragstart', function (e) {
-      var elem = e.target.closest(_this.defaultOptions.draggableSelector); // if the element's parent is not the owner, then block this event
+  Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["removeOldDropzoneAreaElements"])();
+};
 
-      if (!_this.defaultOptions.multipleDropzonesItemsDraggingEnabled && elem && _this.selections.owner !== elem.parentNode) {
-        e.preventDefault();
-        return;
-      }
+/***/ }),
 
-      if (typeof _this.defaultOptions.onDragstart === 'function') {
-        try {
-          _this.defaultOptions.onDragstart(_objectSpread({
-            nativeEvent: e,
-            stop: _this.stopDragAndDrop
-          }, _this.selections));
-        } catch (error) {
-          e.preventDefault();
+/***/ "./src/core/listeners/handlers/dragenter.handler.js":
+/*!**********************************************************!*\
+  !*** ./src/core/listeners/handlers/dragenter.handler.js ***!
+  \**********************************************************/
+/*! exports provided: dragenterHandler */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-          _this.removeOldDropzoneAreaElements();
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "dragenterHandler", function() { return dragenterHandler; });
+var dragenterHandler = function dragenterHandler(e) {
+  this.related = e.target;
+};
 
-          return;
-        }
-      } // [else] if the multiple selection modifier is pressed
-      // and the item's grabbed state is currently false
+/***/ }),
 
+/***/ "./src/core/listeners/handlers/dragleave.handler.js":
+/*!**********************************************************!*\
+  !*** ./src/core/listeners/handlers/dragleave.handler.js ***!
+  \**********************************************************/
+/*! exports provided: dragleaveHandler */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-      if (_this.hasModifier(e) && elem.getAttribute('aria-grabbed') === 'false') {
-        // add this additional selection
-        _this.addSelection(elem);
-      } // we don't need the transfer data, but we have to define something
-      // otherwise the drop action won't work at all in firefox
-      // most browsers support the proper mime-type syntax, eg. "text/plain"
-      // but we have to use this incorrect syntax for the benefit of IE10+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "dragleaveHandler", function() { return dragleaveHandler; });
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../../helpers */ "./src/core/helpers/index.js");
 
+var dragleaveHandler = function dragleaveHandler() {
+  // get a drop target reference from the relatedTarget
+  var droptarget = Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["getContainer"])(this.related); // if the drop target is different from the last stored reference
+  // (or we have one of those references but not the other one)
 
-      e.dataTransfer.setData('text', ''); // apply dropeffect to the target containers
+  if (droptarget !== this.selections.droptarget) {
+    // if we have a saved reference, clear its existing dragover class
+    if (this.selections.droptarget) {
+      this.selections.droptarget.className = this.selections.droptarget.className.replace(/ dragover/g, '');
+    } // apply the dragover class to the new drop target reference
 
-      _this.addDropeffects();
-    }, false); // keydown event to implement selection and abort
 
-    el.addEventListener('keydown', function (e) {
-      // if the element is a grabbable item
-      if (e.target.getAttribute('aria-grabbed')) {
-        // Space is the selection or unselection keystroke
-        if (e.keyCode === 32) {
-          // if the multiple selection modifier is pressed
-          if (_this.hasModifier(e)) {
-            // if the item's grabbed state is currently true
-            if (e.target.getAttribute('aria-grabbed') === 'true') {
-              // if this is the only selected item, clear dropeffect
-              // from the target containers, which we must do first
-              // in case subsequent unselection sets owner to null
-              if (_this.selections.items.length === 1) {
-                _this.clearDropeffects();
-              } // unselect this item
+    if (droptarget) {
+      droptarget.className += ' dragover';
+    } // then save that reference for next time
 
 
-              _this.removeSelection(e.target); // if we have any selections
-              // apply dropeffect to the target containers,
-              // in case earlier selections were made by mouse
+    this.selections.droptarget = droptarget;
+  }
+};
 
+/***/ }),
 
-              if (_this.selections.items.length) {
-                _this.addDropeffects();
-              } // if that was the only selected item
-              // then reset the owner container reference
+/***/ "./src/core/listeners/handlers/dragover.handler.js":
+/*!*********************************************************!*\
+  !*** ./src/core/listeners/handlers/dragover.handler.js ***!
+  \*********************************************************/
+/*! exports provided: dragoverHandler */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "dragoverHandler", function() { return dragoverHandler; });
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../../helpers */ "./src/core/helpers/index.js");
 
-              if (!_this.selections.items.length) {
-                _this.selections.owner = null;
-              }
-            } else {
-              // else [if its grabbed state is currently false]
-              // add this additional selection
-              _this.addSelection(e.target); // apply dropeffect to the target containers
+var state = {
+  previousTarget: null,
+  dragoverCalls: 0
+};
 
+var displayDropzones = function displayDropzones(e) {
+  if (state.dragoverCalls % 100 !== 0 && (e.target === state.previousTarget || !e.target || e.target.className === 'item-dropzone-area')) return;
+  state.dragoverCalls++;
+  state.previousTarget = e.target;
+  this.nextItemElement = e.target.closest(this.defaultOptions.draggableSelector);
+  this.selections.droptarget = e.target.closest(this.defaultOptions.dropzoneSelector);
+  var itemDropzoneElement = document.createElement('div');
+  itemDropzoneElement.className = 'item-dropzone-area';
+  Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["removeOldDropzoneAreaElements"])();
 
-              _this.addDropeffects();
-            }
-          } else if (e.target.getAttribute('aria-grabbed') === 'false') {
-            // else [if the multiple selection modifier is not pressed]
-            // and the item's grabbed state is currently false
-            // clear dropeffect from the target containers
-            _this.clearDropeffects(); // clear all existing selections
+  if (this.selections.droptarget && this.nextItemElement) {
+    this.selections.droptarget.insertBefore(itemDropzoneElement, state.previousTarget.closest(this.defaultOptions.draggableSelector));
+  }
 
+  if (this.selections.droptarget && !this.nextItemElement) {
+    this.selections.droptarget.appendChild(itemDropzoneElement);
+  }
+};
 
-            _this.clearSelections(); // add this new selection
+var dragoverHandler = function dragoverHandler(e) {
+  // if we have any selected items,
+  // allow them to be dragged
+  if (this.selections.items.length) {
+    e.preventDefault();
+  }
 
+  if (!this.defaultOptions.showDropzoneAreas) {
+    return;
+  }
 
-            _this.addSelection(e.target); // apply dropeffect to the target containers
+  displayDropzones.bind(this)(e);
+};
 
+/***/ }),
 
-            _this.addDropeffects();
-          } else {
-            // else [if modifier is not pressed and grabbed is already true]
-            // apply dropeffect to the target containers
-            _this.addDropeffects();
-          } // then prevent default to avoid any conflict with native actions
+/***/ "./src/core/listeners/handlers/dragstart.handler.js":
+/*!**********************************************************!*\
+  !*** ./src/core/listeners/handlers/dragstart.handler.js ***!
+  \**********************************************************/
+/*! exports provided: dragstartHandler */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "dragstartHandler", function() { return dragstartHandler; });
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../../helpers */ "./src/core/helpers/index.js");
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-          e.preventDefault();
-        } // Modifier + M is the end-of-selection keystroke
+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; }
 
 
-        if (e.keyCode === 77 && _this.hasModifier(e)) {
-          // if we have any selected items
-          if (_this.selections.items.length) {
-            // apply dropeffect to the target containers
-            // in case earlier selections were made by mouse
-            _this.addDropeffects(); // if the owner container is the last one, focus the first one
+var dragstartHandler = function dragstartHandler(e) {
+  var elem = e.target.closest(this.defaultOptions.draggableSelector); // if the element's parent is not the owner, then block this event
 
+  if (!this.defaultOptions.multipleDropzonesItemsDraggingEnabled && elem && this.selections.owner !== elem.parentNode) {
+    e.preventDefault();
+    return;
+  }
 
-            if (_this.selections.owner === _this.targets[_this.targets.length - 1]) {
-              _this.targets[0].focus();
-            } else {
-              // else [if it's not the last one], find and focus the next one
-              for (var i = 0; i < _this.targets.length; i++) {
-                if (_this.selections.owner === _this.targets[i]) {
-                  _this.targets[i + 1].focus();
+  if (typeof this.defaultOptions.onDragstart === 'function') {
+    try {
+      this.defaultOptions.onDragstart(_objectSpread({
+        nativeEvent: e,
+        stop: _helpers__WEBPACK_IMPORTED_MODULE_0__["stopDragAndDrop"]
+      }, this.selections));
+    } catch (error) {
+      e.preventDefault();
+      Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["removeOldDropzoneAreaElements"])();
+      return;
+    }
+  } // [else] if the multiple selection modifier is pressed
+  // and the item's grabbed state is currently false
 
-                  break;
-                }
-              }
-            }
-          } // then prevent default to avoid any conflict with native actions
 
+  if (Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["hasModifier"])(e) && elem.getAttribute('aria-grabbed') === 'false') {
+    // add this additional selection
+    _helpers__WEBPACK_IMPORTED_MODULE_0__["addSelection"].bind(this)(elem);
+  } // we don't need the transfer data, but we have to define something
+  // otherwise the drop action won't work at all in firefox
+  // most browsers support the proper mime-type syntax, eg. "text/plain"
+  // but we have to use this incorrect syntax for the benefit of IE10+
 
-          e.preventDefault();
-        }
-      } // Escape is the abort keystroke (for any target element)
 
+  e.dataTransfer.setData('text', ''); // apply dropeffect to the target containers
 
-      if (e.keyCode === 27) {
-        // if we have any selected items
-        if (_this.selections.items.length) {
-          // clear dropeffect from the target containers
-          _this.clearDropeffects(); // then set focus back on the last item that was selected, which is
-          // necessary because we've removed tabindex from the current focus
+  Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["addDropeffects"])(this.items, this.selections, this.targets);
+};
 
+/***/ }),
 
-          _this.selections.items[_this.selections.items.length - 1].focus(); // clear all existing selections
+/***/ "./src/core/listeners/handlers/index.js":
+/*!**********************************************!*\
+  !*** ./src/core/listeners/handlers/index.js ***!
+  \**********************************************/
+/*! exports provided: mousedownHandler, mouseupHandler, dragoverHandler, dragstartHandler, dragenterHandler, dragleaveHandler, dragendHandler, keydownHandler */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _mousedown_handler__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./mousedown.handler */ "./src/core/listeners/handlers/mousedown.handler.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "mousedownHandler", function() { return _mousedown_handler__WEBPACK_IMPORTED_MODULE_0__["mousedownHandler"]; });
 
-          _this.clearSelections(); // but don't prevent default so that native actions can still occur
+/* harmony import */ var _mouseup_handler__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mouseup.handler */ "./src/core/listeners/handlers/mouseup.handler.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "mouseupHandler", function() { return _mouseup_handler__WEBPACK_IMPORTED_MODULE_1__["mouseupHandler"]; });
 
-        }
-      }
-    }, false); // dragenter event to set that variable
+/* harmony import */ var _dragover_handler__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./dragover.handler */ "./src/core/listeners/handlers/dragover.handler.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "dragoverHandler", function() { return _dragover_handler__WEBPACK_IMPORTED_MODULE_2__["dragoverHandler"]; });
 
-    el.addEventListener('dragenter', function (e) {
-      _this.related = e.target;
-    }, false); // dragleave event to maintain target highlighting using that variable
+/* harmony import */ var _dragstart_handler__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./dragstart.handler */ "./src/core/listeners/handlers/dragstart.handler.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "dragstartHandler", function() { return _dragstart_handler__WEBPACK_IMPORTED_MODULE_3__["dragstartHandler"]; });
 
-    el.addEventListener('dragleave', function () {
-      // get a drop target reference from the relatedTarget
-      var droptarget = _this.getContainer(_this.related); // if the drop target is different from the last stored reference
-      // (or we have one of those references but not the other one)
+/* harmony import */ var _dragenter_handler__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./dragenter.handler */ "./src/core/listeners/handlers/dragenter.handler.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "dragenterHandler", function() { return _dragenter_handler__WEBPACK_IMPORTED_MODULE_4__["dragenterHandler"]; });
 
+/* harmony import */ var _dragleave_handler__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./dragleave.handler */ "./src/core/listeners/handlers/dragleave.handler.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "dragleaveHandler", function() { return _dragleave_handler__WEBPACK_IMPORTED_MODULE_5__["dragleaveHandler"]; });
 
-      if (droptarget !== _this.selections.droptarget) {
-        // if we have a saved reference, clear its existing dragover class
-        if (_this.selections.droptarget) {
-          _this.selections.droptarget.className = _this.selections.droptarget.className.replace(/ dragover/g, '');
-        } // apply the dragover class to the new drop target reference
+/* harmony import */ var _dragend_handler__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./dragend.handler */ "./src/core/listeners/handlers/dragend.handler.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "dragendHandler", function() { return _dragend_handler__WEBPACK_IMPORTED_MODULE_6__["dragendHandler"]; });
 
+/* harmony import */ var _keydown_handler__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./keydown.handler */ "./src/core/listeners/handlers/keydown.handler.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "keydownHandler", function() { return _keydown_handler__WEBPACK_IMPORTED_MODULE_7__["keydownHandler"]; });
 
-        if (droptarget) {
-          droptarget.className += ' dragover';
-        } // then save that reference for next time
 
 
-        _this.selections.droptarget = droptarget;
-      }
-    }, false); // dragover event to allow the drag by preventing its default
 
-    el.addEventListener('dragover', function (e) {
-      // if we have any selected items, allow them to be dragged
-      if (_this.selections.items.length) {
-        e.preventDefault();
-      }
-    }, false); // dragend event to implement items being validly dropped into targets,
-    // or invalidly dropped elsewhere, and to clean-up the interface either way
 
-    el.addEventListener('dragend', function (e) {
-      if (typeof _this.defaultOptions.onDragend === 'function') {
-        try {
-          _this.defaultOptions.onDragend(_objectSpread({
-            nativeEvent: e,
-            stop: _this.stopDragAndDrop
-          }, _this.selections));
-        } catch (error) {
-          _this.removeOldDropzoneAreaElements();
 
-          return;
-        }
-      } // if we have a valid drop target reference
-      // (which implies that we have some selected items)
 
 
-      if (_this.selections.droptarget) {
-        // append the selected items to the end of the target container
-        for (var i = 0; i < _this.selections.items.length; i++) {
-          if (_this.nextItemElement) {
-            _this.selections.droptarget.insertBefore(_this.selections.items[i], _this.nextItemElement);
 
-            continue;
-          }
 
-          _this.selections.droptarget.appendChild(_this.selections.items[i]);
-        }
+/***/ }),
 
-        if (typeof _this.defaultOptions.onDrop === 'function') {
-          _this.defaultOptions.onDrop(_objectSpread({
-            nativeEvent: e,
-            stop: function stop() {
-              throw new Error("Stop method is available only for callbacks\n                'onDragstart' and 'onDragend'. For more info look at\n                https://github.com/Vivify-Ideas/vue-draggable/blob/master/README.md\n              ");
-            }
-          }, _this.selections));
-        } // prevent default to allow the action
+/***/ "./src/core/listeners/handlers/keydown.handler.js":
+/*!********************************************************!*\
+  !*** ./src/core/listeners/handlers/keydown.handler.js ***!
+  \********************************************************/
+/*! exports provided: keydownHandler */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "keydownHandler", function() { return keydownHandler; });
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../../helpers */ "./src/core/helpers/index.js");
 
-        e.preventDefault();
-      } // if we have any selected items
+var keydownHandler = function keydownHandler(e) {
+  // if the element is a grabbable item
+  if (e.target.getAttribute('aria-grabbed')) {
+    // Space is the selection or unselection keystroke
+    if (e.keyCode === 32) {
+      // if the multiple selection modifier is pressed
+      if (Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["hasModifier"])(e)) {
+        // if the item's grabbed state is currently true
+        if (e.target.getAttribute('aria-grabbed') === 'true') {
+          // if this is the only selected item, clear dropeffect
+          // from the target containers, which we must do first
+          // in case subsequent unselection sets owner to null
+          if (this.selections.items.length === 1) {
+            Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["clearDropeffects"])(this.items, this.selections, this.targets);
+          } // unselect this item
 
 
-      if (_this.selections.items.length) {
+          _helpers__WEBPACK_IMPORTED_MODULE_0__["removeSelection"].bind(this)(e.target); // if we have any selections
+          // apply dropeffect to the target containers,
+          // in case earlier selections were made by mouse
+
+          if (this.selections.items.length) {
+            Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["addDropeffects"])(this.items, this.selections, this.targets);
+          } // if that was the only selected item
+          // then reset the owner container reference
+
+
+          if (!this.selections.items.length) {
+            this.selections.owner = null;
+          }
+        } else {
+          // else [if its grabbed state is currently false]
+          // add this additional selection
+          _helpers__WEBPACK_IMPORTED_MODULE_0__["addSelection"].bind(this)(e.target); // apply dropeffect to the target containers
+
+          Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["addDropeffects"])(this.items, this.selections, this.targets);
+        }
+      } else if (e.target.getAttribute('aria-grabbed') === 'false') {
+        // else [if the multiple selection modifier is not pressed]
+        // and the item's grabbed state is currently false
         // clear dropeffect from the target containers
-        _this.clearDropeffects(); // if we have a valid drop target reference
+        Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["clearDropeffects"])(this.items, this.selections, this.targets); // clear all existing selections
 
+        _helpers__WEBPACK_IMPORTED_MODULE_0__["clearSelections"].bind(this)(); // add this new selection
 
-        if (_this.selections.droptarget) {
-          // reset the selections array
-          _this.clearSelections(); // reset the target's dragover class
+        _helpers__WEBPACK_IMPORTED_MODULE_0__["addSelection"].bind(this)(e.target); // apply dropeffect to the target containers
 
+        Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["addDropeffects"])(this.items, this.selections, this.targets);
+      } else {
+        // else [if modifier is not pressed and grabbed is already true]
+        // apply dropeffect to the target containers
+        Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["addDropeffects"])(this.items, this.selections, this.targets);
+      } // then prevent default to avoid any conflict with native actions
 
-          _this.selections.droptarget.className = _this.selections.droptarget.className.replace(/ dragover/g, ''); // reset the target reference
 
-          _this.selections.droptarget = null;
+      e.preventDefault();
+    } // Modifier + M is the end-of-selection keystroke
+
+
+    if (e.keyCode === 77 && Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["hasModifier"])(e)) {
+      // if we have any selected items
+      if (this.selections.items.length) {
+        // apply dropeffect to the target containers
+        // in case earlier selections were made by mouse
+        Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["addDropeffects"])(this.items, this.selections, this.targets); // if the owner container is the last one, focus the first one
+
+        if (this.selections.owner === this.targets[this.targets.length - 1]) {
+          this.targets[0].focus();
+        } else {
+          // else [if it's not the last one], find and focus the next one
+          for (var i = 0; i < this.targets.length; i++) {
+            if (this.selections.owner === this.targets[i]) {
+              this.targets[i + 1].focus();
+              break;
+            }
+          }
         }
-      } // dropzone area elements
+      } // then prevent default to avoid any conflict with native actions
 
 
-      _this.removeOldDropzoneAreaElements();
-    }, false); // keydown event to implement items being dropped into targets
+      e.preventDefault();
+    }
+  } // Escape is the abort keystroke (for any target element)
 
-    el.addEventListener('keydown', function (e) {
-      // if the element is a drop target container
-      if (e.target.getAttribute('aria-dropeffect')) {
-        // Enter or Modifier + M is the drop keystroke
-        if (e.keyCode === 13 || e.keyCode === 77 && _this.hasModifier(e)) {
-          // append the selected items to the end of the target container
-          for (var i = 0; i < _this.selections.items.length; i++) {
-            e.target.appendChild(_this.selections.items[i]);
-          } // clear dropeffect from the target containers
 
+  if (e.keyCode === 27) {
+    // if we have any selected items
+    if (this.selections.items.length) {
+      // clear dropeffect from the target containers
+      Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["clearDropeffects"])(this.items, this.selections, this.targets); // then set focus back on the last item that was selected, which is
+      // necessary because we've removed tabindex from the current focus
 
-          _this.clearDropeffects(); // then set focus back on the last item that was selected, which is
-          // necessary because we've removed tabindex from the current focus
+      this.selections.items[this.selections.items.length - 1].focus(); // clear all existing selections
 
+      _helpers__WEBPACK_IMPORTED_MODULE_0__["clearSelections"].bind(this)(); // but don't prevent default so that native actions can still occur
+    }
+  } // if the element is a drop target container
 
-          _this.selections.items[_this.selections.items.length - 1].focus(); // reset the selections array
 
+  if (e.target.getAttribute('aria-dropeffect')) {
+    // Enter or Modifier + M is the drop keystroke
+    if (e.keyCode === 13 || e.keyCode === 77 && Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["hasModifier"])(e)) {
+      // append the selected items to the end of the target container
+      for (var _i = 0; _i < this.selections.items.length; _i++) {
+        e.target.appendChild(this.selections.items[_i]);
+      } // clear dropeffect from the target containers
 
-          _this.clearSelections(); // prevent default to to avoid any conflict with native actions
 
+      Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["clearDropeffects"])(this.items, this.selections, this.targets); // then set focus back on the last item that was selected, which is
+      // necessary because we've removed tabindex from the current focus
 
-          e.preventDefault();
-        }
-      }
-    }, false);
+      this.selections.items[this.selections.items.length - 1].focus(); // reset the selections array
 
-    if (!this.defaultOptions.showDropzoneAreas) {
-      return;
+      _helpers__WEBPACK_IMPORTED_MODULE_0__["clearSelections"].bind(this)(); // prevent default to to avoid any conflict with native actions
+
+      e.preventDefault();
     }
+  }
+};
 
-    var previousTarget = null;
-    var dragoverCalls = 0;
-    document.addEventListener('dragover', function (e) {
-      if (dragoverCalls % 10 !== 0 && e.target === previousTarget || !e.target || e.target.className === 'item-dropzone-area') return;
-      dragoverCalls++;
-      previousTarget = e.target;
-      _this.nextItemElement = e.target.closest(_this.defaultOptions.draggableSelector);
-      _this.selections.droptarget = e.target.closest(_this.defaultOptions.dropzoneSelector);
-      var itemDropzoneElement = document.createElement('div');
-      itemDropzoneElement.className = 'item-dropzone-area';
+/***/ }),
 
-      _this.removeOldDropzoneAreaElements();
+/***/ "./src/core/listeners/handlers/mousedown.handler.js":
+/*!**********************************************************!*\
+  !*** ./src/core/listeners/handlers/mousedown.handler.js ***!
+  \**********************************************************/
+/*! exports provided: mousedownHandler */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-      if (_this.selections.droptarget && _this.nextItemElement) {
-        _this.selections.droptarget.insertBefore(itemDropzoneElement, previousTarget.closest(_this.defaultOptions.draggableSelector));
-      }
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mousedownHandler", function() { return mousedownHandler; });
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../../helpers */ "./src/core/helpers/index.js");
 
-      if (_this.selections.droptarget && !_this.nextItemElement) {
-        _this.selections.droptarget.appendChild(itemDropzoneElement);
-      }
-    });
-  },
-  initiate: function initiate(el) {
-    if (this.defaultOptions.excludeOlderBrowsers && this.isOldBrowser()) {
-      return;
-    }
+var mousedownHandler = function mousedownHandler(e) {
+  var elem = e.target.closest(this.defaultOptions.draggableSelector); // if the element is a draggable item
 
-    this.targets = el.querySelectorAll(this.defaultOptions.dropzoneSelector);
-    this.items = el.querySelectorAll(this.defaultOptions.draggableSelector);
+  if (elem && elem.getAttribute('draggable')) {
+    // clear dropeffect from the target containers
+    Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["clearDropeffects"])(this.items, this.selections, this.targets); // if the multiple selection modifier is not pressed
+    // and the item's grabbed state is currently false
 
-    for (var i = 0; i < this.targets.length; i++) {
-      this.targets[i].setAttribute('aria-dropeffect', 'none');
+    if (!Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["hasModifier"])(e) && elem.getAttribute('aria-grabbed') === 'false') {
+      // clear all existing selections
+      _helpers__WEBPACK_IMPORTED_MODULE_0__["clearSelections"].bind(this)(); // then add this new selection
+
+      _helpers__WEBPACK_IMPORTED_MODULE_0__["addSelection"].bind(this)(elem);
     }
+  } else if (!Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["hasModifier"])(e)) {
+    // else [if the element is anything else]
+    // and the selection modifier is not pressed
+    // clear dropeffect from the target containers
+    Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["clearDropeffects"])(this.items, this.selections, this.targets); // clear all existing selections
 
-    for (var _i3 = 0; _i3 < this.items.length; _i3++) {
-      this.items[_i3].setAttribute('draggable', 'true');
+    _helpers__WEBPACK_IMPORTED_MODULE_0__["clearSelections"].bind(this)();
+  } else {
+    // else [if the element is anything else and the modifier is pressed]
+    // clear dropeffect from the target containers
+    Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["clearDropeffects"])(this.items, this.selections, this.targets);
+  }
+};
 
-      this.items[_i3].setAttribute('aria-grabbed', 'false');
+/***/ }),
 
-      this.items[_i3].setAttribute('tabindex', '0');
+/***/ "./src/core/listeners/handlers/mouseup.handler.js":
+/*!********************************************************!*\
+  !*** ./src/core/listeners/handlers/mouseup.handler.js ***!
+  \********************************************************/
+/*! exports provided: mouseupHandler */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mouseupHandler", function() { return mouseupHandler; });
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../../helpers */ "./src/core/helpers/index.js");
+
+
+var isItemInSelectionArea = function isItemInSelectionArea(item, element, lastItem) {
+  return item.parentNode === element.parentNode && (element.offsetTop > lastItem.offsetTop && item.offsetTop <= element.offsetTop && item.offsetTop >= lastItem.offsetTop || item.offsetTop >= element.offsetTop && item.offsetTop <= lastItem.offsetTop);
+};
+
+var mouseupHandler = function mouseupHandler(e) {
+  var _this = this;
+
+  var elem = e.target.closest(this.defaultOptions.draggableSelector); // if the element is a draggable item
+  // and the multipler selection modifier is pressed
+
+  if (elem && elem.getAttribute('draggable') && Object(_helpers__WEBPACK_IMPORTED_MODULE_0__["hasModifier"])(e)) {
+    // if shift key is pressed select multiple items
+    if (this.selections.items.length && e.shiftKey) {
+      // last selected item
+      var lastItem = this.selections.items.slice(-1).pop();
+      this.items.forEach(function (item) {
+        var shouldSelectItem = isItemInSelectionArea(item, elem, lastItem);
+        shouldSelectItem && _helpers__WEBPACK_IMPORTED_MODULE_0__["addSelection"].bind(_this)(item);
+      }); // if the item's grabbed state is currently true
+    } else if (elem.getAttribute('aria-grabbed') === 'true') {
+      // unselect this item
+      _helpers__WEBPACK_IMPORTED_MODULE_0__["removeSelection"].bind(this)(elem); // if that was the only selected item
+      // then reset the owner container reference
+
+      if (!this.selections.items.length) {
+        this.selections.owner = null;
+      }
+    } else {
+      // else [if the item's grabbed state is false]
+      // add this additional selection
+      _helpers__WEBPACK_IMPORTED_MODULE_0__["addSelection"].bind(this)(elem);
     }
@@ -652,9 +856,46 @@ }
 
+/***/ }),
 
+/***/ "./src/core/listeners/index.js":
+/*!*************************************!*\
+  !*** ./src/core/listeners/index.js ***!
+  \*************************************/
+/*! exports provided: attachListeners */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "attachListeners", function() { return attachListeners; });
+/* harmony import */ var _handlers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./handlers */ "./src/core/listeners/handlers/index.js");
+
+var attachListeners = function attachListeners(el) {
+  var _this = this;
+
+  // mousedown event to clear previous selections
+  el.addEventListener('mousedown', _handlers__WEBPACK_IMPORTED_MODULE_0__["mousedownHandler"].bind(this), false); // mouseup event to implement multiple selection
+
+  el.addEventListener('mouseup', _handlers__WEBPACK_IMPORTED_MODULE_0__["mouseupHandler"].bind(this), false); // dragstart event to initiate mouse dragging
+
+  el.addEventListener('dragstart', _handlers__WEBPACK_IMPORTED_MODULE_0__["dragstartHandler"].bind(this), false); // keydown event to implement selection and abort
+
+  el.addEventListener('keydown', _handlers__WEBPACK_IMPORTED_MODULE_0__["keydownHandler"].bind(this), false); // dragenter event to set related variable
+
+  el.addEventListener('dragenter', function (e) {
+    return _handlers__WEBPACK_IMPORTED_MODULE_0__["dragenterHandler"].bind(_this)(e);
+  }, false); // dragleave event to maintain target highlighting using that variable
+
+  el.addEventListener('dragleave', _handlers__WEBPACK_IMPORTED_MODULE_0__["dragleaveHandler"].bind(this), false); // dragover event to allow the drag by preventing its default
+
+  document.addEventListener('dragover', _handlers__WEBPACK_IMPORTED_MODULE_0__["dragoverHandler"].bind(this), false); // dragend event to implement items being validly dropped into targets,
+  // or invalidly dropped elsewhere, and to clean-up the interface either way
+
+  el.addEventListener('dragend', _handlers__WEBPACK_IMPORTED_MODULE_0__["dragendHandler"].bind(this), false);
+};
+
 /***/ }),
 
-/***/ "./src/vue-draggable-options.js":
-/*!**************************************!*\
-  !*** ./src/vue-draggable-options.js ***!
-  \**************************************/
+/***/ "./src/core/options.js":
+/*!*****************************!*\
+  !*** ./src/core/options.js ***!
+  \*****************************/
 /*! exports provided: VueDraggableOptions */
@@ -670,3 +911,2 @@ /***/ (function(module, __webpack_exports__, __webpack_require__) {
     draggableSelector: 'li',
-    excludeOlderBrowsers: true,
     multipleDropzonesItemsDraggingEnabled: true,
@@ -694,7 +934,7 @@ showDropzoneAreas: true,
 
-/***/ "./src/vue-draggable.js":
-/*!******************************!*\
-  !*** ./src/vue-draggable.js ***!
-  \******************************/
-/*! exports provided: VueDraggable */
+/***/ "./src/core/state.js":
+/*!***************************!*\
+  !*** ./src/core/state.js ***!
+  \***************************/
+/*! exports provided: VueDraggableState */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -704,16 +944,51 @@
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VueDraggable", function() { return VueDraggable; });
-/* harmony import */ var _vue_draggable_options__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./vue-draggable-options */ "./src/vue-draggable-options.js");
-/* harmony import */ var _vue_draggable_methods__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./vue-draggable-methods */ "./src/vue-draggable-methods.js");
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VueDraggableState", function() { return VueDraggableState; });
+var VueDraggableState = {
+  targets: null,
+  items: null,
+  nextItemElement: null,
+  // related variable is needed to maintain a reference to the
+  // dragleave's relatedTarget, since it doesn't have e.relatedTarget
+  related: null,
+  selections: {
+    items: [],
+    owner: null,
+    droptarget: null
+  }
+};
 
-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; }
+/***/ }),
 
+/***/ "./src/index.js":
+/*!**********************!*\
+  !*** ./src/index.js ***!
+  \**********************/
+/*! exports provided: VueDraggableDirective, default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VueDraggableDirective", function() { return VueDraggableDirective; });
+/* harmony import */ var _core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./core */ "./src/core/index.js");
 
+var VueDraggableDirective = {
+  bind: function bind(el, options) {
+    // override default options
+    Object.assign(_core__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].defaultOptions, options.value);
+    _core__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].registerListeners(el);
+    _core__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].initiate(el);
+  },
+  componentUpdated: function componentUpdated(el) {
+    setTimeout(function () {
+      _core__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].initiate(el);
+    });
+  }
+};
 
-var VueDraggable = _objectSpread({}, _vue_draggable_options__WEBPACK_IMPORTED_MODULE_0__["VueDraggableOptions"], _vue_draggable_methods__WEBPACK_IMPORTED_MODULE_1__["VueDraggableMethods"]);
+_core__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"].install = function (Vue) {
+  Vue.directive('drag-and-drop', VueDraggableDirective);
+};
 
+/* harmony default export */ __webpack_exports__["default"] = (_core__WEBPACK_IMPORTED_MODULE_0__["VueDraggable"]);
 
-
 /***/ })
@@ -720,0 +995,0 @@

lib/vue-draggable.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("VueDraggable",[],t):"object"==typeof exports?exports.VueDraggable=t():e.VueDraggable=t()}(this,function(){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);function n(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){o(e,t,r[t])})}return e}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){s(e,t,r[t])})}return e}({},{defaultOptions:{dropzoneSelector:"ul",draggableSelector:"li",excludeOlderBrowsers:!0,multipleDropzonesItemsDraggingEnabled:!0,showDropzoneAreas:!0,onDrop:function(){},onDragstart:function(){},onDragend:function(){}},targets:null,items:null,nextItemElement:null,related:null,selections:{items:[],owner:null,droptarget:null}},{stopDragAndDrop:function(){throw new Error("Requested D&D stop...")},isOldBrowser:function(){return!document.querySelectorAll||!("draggable"in document.createElement("span"))||window.opera},addSelection:function(e){this.selections.owner||(this.selections.owner=e.parentNode),(this.defaultOptions.multipleDropzonesItemsDraggingEnabled||this.selections.owner===e.parentNode)&&(e.setAttribute("aria-grabbed","true"),this.selections.items=i(this.selections.items).concat([e]))},removeSelection:function(e){e.setAttribute("aria-grabbed","false");for(var t=0;t<this.selections.items.length;t++)if(this.selections.items[t]===e){this.selections.items.splice(t,1);break}},clearSelections:function(){if(this.selections.items.length){this.selections.owner=null;for(var e=0;e<this.selections.items.length;e++)this.selections.items[e].setAttribute("aria-grabbed","false");this.selections.items=[]}},hasModifier:function(e){return e.ctrlKey||e.metaKey||e.shiftKey},addDropeffects:function(){for(var e=this.targets.length,t=0;t<e;t++)this.targets[t]!==this.selections.owner&&"none"===this.targets[t].getAttribute("aria-dropeffect")&&(this.targets[t].setAttribute("aria-dropeffect","move"),this.targets[t].setAttribute("tabindex","0"));for(var r=this.items.length,n=0;n<r;n++)this.items[n].parentNode!==this.selections.owner&&this.items[n].getAttribute("aria-grabbed")&&(this.items[n].removeAttribute("aria-grabbed"),this.items[n].removeAttribute("tabindex"))},clearDropeffects:function(){if(this.selections.items.length){for(var e=0;e<this.targets.length;e++)"none"!==this.targets[e].getAttribute("aria-dropeffect")&&(this.targets[e].setAttribute("aria-dropeffect","none"),this.targets[e].removeAttribute("tabindex"));for(var t=0;t<this.items.length;t++)this.items[t].getAttribute("aria-grabbed")?"true"===this.items[t].getAttribute("aria-grabbed")&&this.items[t].setAttribute("tabindex","0"):(this.items[t].setAttribute("aria-grabbed","false"),this.items[t].setAttribute("tabindex","0"))}},getContainer:function(e){var t=e;do{if(t&&1===t.nodeType&&t.getAttribute("aria-dropeffect"))return t}while(t=t?t.parentNode:null);return null},removeOldDropzoneAreaElements:function(){for(var e=document.querySelectorAll(".item-dropzone-area"),t=0;t<e.length;t++)e[t].remove()},registerListeners:function(e){var t=this;if((!this.defaultOptions.excludeOlderBrowsers||!this.isOldBrowser())&&(e.addEventListener("mousedown",function(e){var r=e.target.closest(t.defaultOptions.draggableSelector);r&&r.getAttribute("draggable")?(t.clearDropeffects(),t.hasModifier(e)||"false"!==r.getAttribute("aria-grabbed")||(t.clearSelections(),t.addSelection(r))):t.hasModifier(e)?t.clearDropeffects():(t.clearDropeffects(),t.clearSelections())},!1),e.addEventListener("mouseup",function(e){var r=e.target.closest(t.defaultOptions.draggableSelector);r&&r.getAttribute("draggable")&&t.hasModifier(e)&&("true"===r.getAttribute("aria-grabbed")?(t.removeSelection(r),t.selections.items.length||(t.selections.owner=null)):t.addSelection(r))},!1),e.addEventListener("dragstart",function(e){var r=e.target.closest(t.defaultOptions.draggableSelector);if(t.defaultOptions.multipleDropzonesItemsDraggingEnabled||!r||t.selections.owner===r.parentNode){if("function"==typeof t.defaultOptions.onDragstart)try{t.defaultOptions.onDragstart(n({nativeEvent:e,stop:t.stopDragAndDrop},t.selections))}catch(r){return e.preventDefault(),void t.removeOldDropzoneAreaElements()}t.hasModifier(e)&&"false"===r.getAttribute("aria-grabbed")&&t.addSelection(r),e.dataTransfer.setData("text",""),t.addDropeffects()}else e.preventDefault()},!1),e.addEventListener("keydown",function(e){if(e.target.getAttribute("aria-grabbed")&&(32===e.keyCode&&(t.hasModifier(e)?"true"===e.target.getAttribute("aria-grabbed")?(1===t.selections.items.length&&t.clearDropeffects(),t.removeSelection(e.target),t.selections.items.length&&t.addDropeffects(),t.selections.items.length||(t.selections.owner=null)):(t.addSelection(e.target),t.addDropeffects()):"false"===e.target.getAttribute("aria-grabbed")?(t.clearDropeffects(),t.clearSelections(),t.addSelection(e.target),t.addDropeffects()):t.addDropeffects(),e.preventDefault()),77===e.keyCode&&t.hasModifier(e))){if(t.selections.items.length)if(t.addDropeffects(),t.selections.owner===t.targets[t.targets.length-1])t.targets[0].focus();else for(var r=0;r<t.targets.length;r++)if(t.selections.owner===t.targets[r]){t.targets[r+1].focus();break}e.preventDefault()}27===e.keyCode&&t.selections.items.length&&(t.clearDropeffects(),t.selections.items[t.selections.items.length-1].focus(),t.clearSelections())},!1),e.addEventListener("dragenter",function(e){t.related=e.target},!1),e.addEventListener("dragleave",function(){var e=t.getContainer(t.related);e!==t.selections.droptarget&&(t.selections.droptarget&&(t.selections.droptarget.className=t.selections.droptarget.className.replace(/ dragover/g,"")),e&&(e.className+=" dragover"),t.selections.droptarget=e)},!1),e.addEventListener("dragover",function(e){t.selections.items.length&&e.preventDefault()},!1),e.addEventListener("dragend",function(e){if("function"==typeof t.defaultOptions.onDragend)try{t.defaultOptions.onDragend(n({nativeEvent:e,stop:t.stopDragAndDrop},t.selections))}catch(e){return void t.removeOldDropzoneAreaElements()}if(t.selections.droptarget){for(var r=0;r<t.selections.items.length;r++)t.nextItemElement?t.selections.droptarget.insertBefore(t.selections.items[r],t.nextItemElement):t.selections.droptarget.appendChild(t.selections.items[r]);"function"==typeof t.defaultOptions.onDrop&&t.defaultOptions.onDrop(n({nativeEvent:e,stop:function(){throw new Error("Stop method is available only for callbacks\n                'onDragstart' and 'onDragend'. For more info look at\n                https://github.com/Vivify-Ideas/vue-draggable/blob/master/README.md\n              ")}},t.selections)),e.preventDefault()}t.selections.items.length&&(t.clearDropeffects(),t.selections.droptarget&&(t.clearSelections(),t.selections.droptarget.className=t.selections.droptarget.className.replace(/ dragover/g,""),t.selections.droptarget=null)),t.removeOldDropzoneAreaElements()},!1),e.addEventListener("keydown",function(e){if(e.target.getAttribute("aria-dropeffect")&&(13===e.keyCode||77===e.keyCode&&t.hasModifier(e))){for(var r=0;r<t.selections.items.length;r++)e.target.appendChild(t.selections.items[r]);t.clearDropeffects(),t.selections.items[t.selections.items.length-1].focus(),t.clearSelections(),e.preventDefault()}},!1),this.defaultOptions.showDropzoneAreas)){var r=null,o=0;document.addEventListener("dragover",function(e){if((o%10==0||e.target!==r)&&e.target&&"item-dropzone-area"!==e.target.className){o++,r=e.target,t.nextItemElement=e.target.closest(t.defaultOptions.draggableSelector),t.selections.droptarget=e.target.closest(t.defaultOptions.dropzoneSelector);var n=document.createElement("div");n.className="item-dropzone-area",t.removeOldDropzoneAreaElements(),t.selections.droptarget&&t.nextItemElement&&t.selections.droptarget.insertBefore(n,r.closest(t.defaultOptions.draggableSelector)),t.selections.droptarget&&!t.nextItemElement&&t.selections.droptarget.appendChild(n)}})}},initiate:function(e){if(!this.defaultOptions.excludeOlderBrowsers||!this.isOldBrowser()){this.targets=e.querySelectorAll(this.defaultOptions.dropzoneSelector),this.items=e.querySelectorAll(this.defaultOptions.draggableSelector);for(var t=0;t<this.targets.length;t++)this.targets[t].setAttribute("aria-dropeffect","none");for(var r=0;r<this.items.length;r++)this.items[r].setAttribute("draggable","true"),this.items[r].setAttribute("aria-grabbed","false"),this.items[r].setAttribute("tabindex","0")}}});r.d(t,"VueDraggableDirective",function(){return l});var l={bind:function(e,t){Object.assign(a.defaultOptions,t.value),a.registerListeners(e),a.initiate(e)},componentUpdated:function(e){setTimeout(function(){a.initiate(e)})}};a.install=function(e){e.directive("drag-and-drop",l)};t.default=a}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueDraggable",[],e):"object"==typeof exports?exports.VueDraggable=e():t.VueDraggable=e()}(this,function(){return function(t){var e={};function i(s){if(e[s])return e[s].exports;var r=e[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(s,r,function(e){return t[e]}.bind(null,r));return s},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";i.r(e);var s=function(){for(var t=document.querySelectorAll(".item-dropzone-area"),e=0;e<t.length;e++)t[e].remove()},r=function(t,e,i){for(var s=i.length,r=0;r<s;r++)i[r]!==e.owner&&"none"===i[r].getAttribute("aria-dropeffect")&&(i[r].setAttribute("aria-dropeffect","move"),i[r].setAttribute("tabindex","0"));for(var n=t.length,o=0;o<n;o++)t[o].parentNode!==e.owner&&t[o].getAttribute("aria-grabbed")&&(t[o].removeAttribute("aria-grabbed"),t[o].removeAttribute("tabindex"))},n=function(t,e,i){if(e.items.length){for(var s=0;s<i.length;s++)"none"!==i[s].getAttribute("aria-dropeffect")&&(i[s].setAttribute("aria-dropeffect","none"),i[s].removeAttribute("tabindex"));for(var r=0;r<t.length;r++)t[r].getAttribute("aria-grabbed")?"true"===t[r].getAttribute("aria-grabbed")&&t[r].setAttribute("tabindex","0"):(t[r].setAttribute("aria-grabbed","false"),t[r].setAttribute("tabindex","0"))}},o=function(t){return t.ctrlKey||t.metaKey||t.shiftKey};function a(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var l=function(t){this.selections.owner||(this.selections.owner=t.parentNode),(this.defaultOptions.multipleDropzonesItemsDraggingEnabled||this.selections.owner===t.parentNode)&&(t.setAttribute("aria-grabbed","true"),this.selections.items=a(this.selections.items).concat([t]))},c=function(t){t.setAttribute("aria-grabbed","false");for(var e=0;e<this.selections.items.length;e++)if(this.selections.items[e]===t){this.selections.items.splice(e,1);break}},u=function(){if(this.selections.items.length){this.selections.owner=null;for(var t=0;t<this.selections.items.length;t++)this.selections.items[t].setAttribute("aria-grabbed","false");this.selections.items=[]}},f=function(){throw new Error("Requested D&D stop...")},d={previousTarget:null,dragoverCalls:0},h=function(t){this.selections.items.length&&t.preventDefault(),this.defaultOptions.showDropzoneAreas&&function(t){if(d.dragoverCalls%100==0||t.target!==d.previousTarget&&t.target&&"item-dropzone-area"!==t.target.className){d.dragoverCalls++,d.previousTarget=t.target,this.nextItemElement=t.target.closest(this.defaultOptions.draggableSelector),this.selections.droptarget=t.target.closest(this.defaultOptions.dropzoneSelector);var e=document.createElement("div");e.className="item-dropzone-area",s(),this.selections.droptarget&&this.nextItemElement&&this.selections.droptarget.insertBefore(e,d.previousTarget.closest(this.defaultOptions.draggableSelector)),this.selections.droptarget&&!this.nextItemElement&&this.selections.droptarget.appendChild(e)}}.bind(this)(t)};function g(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}var b=function(t){var e=t.target.closest(this.defaultOptions.draggableSelector);if(this.defaultOptions.multipleDropzonesItemsDraggingEnabled||!e||this.selections.owner===e.parentNode){if("function"==typeof this.defaultOptions.onDragstart)try{this.defaultOptions.onDragstart(function(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{},s=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),s.forEach(function(e){g(t,e,i[e])})}return t}({nativeEvent:t,stop:f},this.selections))}catch(e){return t.preventDefault(),void s()}o(t)&&"false"===e.getAttribute("aria-grabbed")&&l.bind(this)(e),t.dataTransfer.setData("text",""),r(this.items,this.selections,this.targets)}else t.preventDefault()};function p(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{},s=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),s.forEach(function(e){m(t,e,i[e])})}return t}function m(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}var v=function(t){var e=this;t.addEventListener("mousedown",function(t){var e=t.target.closest(this.defaultOptions.draggableSelector);e&&e.getAttribute("draggable")?(n(this.items,this.selections,this.targets),o(t)||"false"!==e.getAttribute("aria-grabbed")||(u.bind(this)(),l.bind(this)(e))):o(t)?n(this.items,this.selections,this.targets):(n(this.items,this.selections,this.targets),u.bind(this)())}.bind(this),!1),t.addEventListener("mouseup",function(t){var e=this,i=t.target.closest(this.defaultOptions.draggableSelector);if(i&&i.getAttribute("draggable")&&o(t))if(this.selections.items.length&&t.shiftKey){var s=this.selections.items.slice(-1).pop();this.items.forEach(function(t){(function(t,e,i){return t.parentNode===e.parentNode&&(e.offsetTop>i.offsetTop&&t.offsetTop<=e.offsetTop&&t.offsetTop>=i.offsetTop||t.offsetTop>=e.offsetTop&&t.offsetTop<=i.offsetTop)})(t,i,s)&&l.bind(e)(t)})}else"true"===i.getAttribute("aria-grabbed")?(c.bind(this)(i),this.selections.items.length||(this.selections.owner=null)):l.bind(this)(i)}.bind(this),!1),t.addEventListener("dragstart",b.bind(this),!1),t.addEventListener("keydown",function(t){if(t.target.getAttribute("aria-grabbed")&&(32===t.keyCode&&(o(t)?"true"===t.target.getAttribute("aria-grabbed")?(1===this.selections.items.length&&n(this.items,this.selections,this.targets),c.bind(this)(t.target),this.selections.items.length&&r(this.items,this.selections,this.targets),this.selections.items.length||(this.selections.owner=null)):(l.bind(this)(t.target),r(this.items,this.selections,this.targets)):"false"===t.target.getAttribute("aria-grabbed")?(n(this.items,this.selections,this.targets),u.bind(this)(),l.bind(this)(t.target),r(this.items,this.selections,this.targets)):r(this.items,this.selections,this.targets),t.preventDefault()),77===t.keyCode&&o(t))){if(this.selections.items.length)if(r(this.items,this.selections,this.targets),this.selections.owner===this.targets[this.targets.length-1])this.targets[0].focus();else for(var e=0;e<this.targets.length;e++)if(this.selections.owner===this.targets[e]){this.targets[e+1].focus();break}t.preventDefault()}if(27===t.keyCode&&this.selections.items.length&&(n(this.items,this.selections,this.targets),this.selections.items[this.selections.items.length-1].focus(),u.bind(this)()),t.target.getAttribute("aria-dropeffect")&&(13===t.keyCode||77===t.keyCode&&o(t))){for(var i=0;i<this.selections.items.length;i++)t.target.appendChild(this.selections.items[i]);n(this.items,this.selections,this.targets),this.selections.items[this.selections.items.length-1].focus(),u.bind(this)(),t.preventDefault()}}.bind(this),!1),t.addEventListener("dragenter",function(t){return function(t){this.related=t.target}.bind(e)(t)},!1),t.addEventListener("dragleave",function(){var t=function(t){var e=t;do{if(e&&1===e.nodeType&&e.getAttribute("aria-dropeffect"))return e}while(e=e?e.parentNode:null);return null}(this.related);t!==this.selections.droptarget&&(this.selections.droptarget&&(this.selections.droptarget.className=this.selections.droptarget.className.replace(/ dragover/g,"")),t&&(t.className+=" dragover"),this.selections.droptarget=t)}.bind(this),!1),document.addEventListener("dragover",h.bind(this),!1),t.addEventListener("dragend",function(t){if("function"==typeof this.defaultOptions.onDragend)try{this.defaultOptions.onDragend(p({nativeEvent:t,stop:f},this.selections))}catch(t){return void s()}if(this.selections.droptarget){for(var e=0;e<this.selections.items.length;e++)this.nextItemElement?this.selections.droptarget.insertBefore(this.selections.items[e],this.nextItemElement):this.selections.droptarget.appendChild(this.selections.items[e]);"function"==typeof this.defaultOptions.onDrop&&this.defaultOptions.onDrop(p({nativeEvent:t,stop:function(){throw new Error("Stop method is available only for callbacks\n                    'onDragstart' and 'onDragend'. For more info look at\n                    https://github.com/Vivify-Ideas/vue-draggable/blob/master/README.md\n                  ")}},this.selections)),t.preventDefault()}this.selections.items.length&&(n(this.items,this.selections,this.targets),this.selections.droptarget&&(u.bind(this)(),this.selections.droptarget.className=this.selections.droptarget.className.replace(/ dragover/g,""),this.selections.droptarget=null)),s()}.bind(this),!1)};function y(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}var O=function(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{},s=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(s=s.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),s.forEach(function(e){y(t,e,i[e])})}return t}({},{defaultOptions:{dropzoneSelector:"ul",draggableSelector:"li",multipleDropzonesItemsDraggingEnabled:!0,showDropzoneAreas:!0,onDrop:function(){},onDragstart:function(){},onDragend:function(){}},targets:null,items:null,nextItemElement:null,related:null,selections:{items:[],owner:null,droptarget:null}},{targets:null,items:null,nextItemElement:null,related:null,selections:{items:[],owner:null,droptarget:null}},{registerListeners:function(t){v.bind(this)(t)},initiate:function(t){(function(t){this.targets=function(t){return t.querySelectorAll(this.defaultOptions.dropzoneSelector)}.bind(this)(t),this.items=function(t){return t.querySelectorAll(this.defaultOptions.draggableSelector)}.bind(this)(t);for(var e=0;e<this.targets.length;e++)this.targets[e].setAttribute("aria-dropeffect","none");for(var i=0;i<this.items.length;i++)this.items[i].setAttribute("draggable","true"),this.items[i].setAttribute("aria-grabbed","false"),this.items[i].setAttribute("tabindex","0")}).bind(this)(t)}});i.d(e,"VueDraggableDirective",function(){return A});var A={bind:function(t,e){Object.assign(O.defaultOptions,e.value),O.registerListeners(t),O.initiate(t)},componentUpdated:function(t){setTimeout(function(){O.initiate(t)})}};O.install=function(t){t.directive("drag-and-drop",A)};e.default=O}])});
 //# sourceMappingURL=vue-draggable.min.js.map

package.json

 {
   "name": "vue-draggable",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Vue drag and drop library without any dependency",
@@ -5,0 +5,0 @@ "main": "lib/vue-draggable.js",

README.md

@@ -68,3 +68,2 @@ # VueDraggable
   draggableSelector: 'li',
-  excludeOlderBrowsers: true,
   multipleDropzonesItemsDraggingEnabled: true,
@@ -89,4 +88,11 @@ showDropzoneAreas: true,
 ```
+
+## Contributors 🎖
+
+[<img alt="nikolasp" src="https://avatars2.githubusercontent.com/u/9221865?v=4&s=100&width=100">](https://github.com/nikolasp) |[<img alt="tiagocsilva" src="https://avatars3.githubusercontent.com/u/18669835?v=4&s=100&width=100">](https://github.com/tiagocsilva) |
+:---:|:---:|
+[nikolasp](https://github.com/nikolasp)|[tiagocsilva](https://github.com/tiagocsilva)|
+
 ---
 
 LICENCE MIT - Created by Nikola Spalevic ([e-mail])

src/index.js

@@ -1,2 +0,2 @@
-import { VueDraggable } from './vue-draggable';
+import { VueDraggable } from './core';
 
@@ -3,0 +3,0 @@ export const VueDraggableDirective = {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88227

increased by33.28%

Number of package files

24

increased by118.18%

Lines of code

1446

increased by27.07%

Number of lines in readme file

97

increased by6.59%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes