react-reorderable-list - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.js

@@ -59,2 +59,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+function distance(pointA, pointB) {
+  var xDiff = pointA.x - pointB.x;
+  var yDiff = pointA.y - pointB.y;
+  return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+}
+
 function insertBefore(container, referenceElement, newElement) {
@@ -68,9 +74,5 @@ container.insertBefore(newElement, referenceElement);
   var closestElement = nodeList[0];
-  var xDiff = nodeList[0].getBoundingClientRect().x - targetElement.getBoundingClientRect().x;
-  var yDiff = nodeList[0].getBoundingClientRect().y - targetElement.getBoundingClientRect().y;
-  var dist = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+  var dist = distance(closestElement.getBoundingClientRect(), targetElement.getBoundingClientRect());
   nodeList.forEach(function (element) {
-    xDiff = element.getBoundingClientRect().x - targetElement.getBoundingClientRect().x;
-    yDiff = element.getBoundingClientRect().y - targetElement.getBoundingClientRect().y;
-    var currentDist = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+    var currentDist = distance(element.getBoundingClientRect(), targetElement.getBoundingClientRect());
 
@@ -99,3 +101,2 @@ if (currentDist < dist) {
   var targetRect = target.getBoundingClientRect();
-  list = [].concat(list);
   list = list.filter(function (node) {
@@ -108,2 +109,5 @@ var nodeRect = node.getBoundingClientRect();
 }
+function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+}
 
@@ -151,3 +155,3 @@ var ListItem = /*#__PURE__*/function () {
 
-var CSS = {"ui-item-no-drop":"_reorderable-item__ui-item-no-drop__2fWNB"};
+var styles = {"noDrop":"_2onRf","uiItem":"_3ks3y"};
 
@@ -162,103 +166,37 @@ var ReOrderableItem = /*#__PURE__*/function (_Component) {
 
-    _this._onMouseMove = function (event) {
-      var _this$props$onItemDra, _this$props;
+    _this._onItemMouseMove = function (event) {
+      var input = isTouchDevice() ? event.changedTouches[0] : event;
 
-      if (!_this._isDragging) return;
-      var dragX = event.pageX - _this._halfWidth - _this._offset.x;
-      var dragY = event.pageY - _this._halfHeight - _this._offset.y;
-      _this.draggedElement.style.left = dragX + "px";
-      _this.draggedElement.style.top = dragY + "px";
+      if (_this._dragTrigger.mouseDown && !_this._isDragging) {
+        var dist = distance({
+          x: input.pageX,
+          y: input.pageY
+        }, {
+          x: _this._dragTrigger.prevX,
+          y: _this._dragTrigger.prevY
+        });
 
-      _this._checkOverlappingElements();
+        if (dist >= 1) {
+          _this._dragTrigger.mouseDown = false;
 
-      (_this$props$onItemDra = (_this$props = _this.props).onItemDrag) === null || _this$props$onItemDra === void 0 ? void 0 : _this$props$onItemDra.call(_this$props, {
-        item: _assertThisInitialized(_this),
-        dragX: dragX,
-        dragY: dragY,
-        pageX: event.pageX,
-        pageY: event.pageY,
-        clientX: event.clientX,
-        clientY: event.clientY
-      });
+          _this._handleDragStart(event);
+        }
+      }
     };
 
-    _this._onMouseUp = function (event) {
-      var _this$props$onItemDra2, _this$props2, _this$_draggedElement;
-
-      if (!_this._isDragging) return;
-
-      if (document.body.classList.contains(CSS['ui-item-no-drop'])) {
-        document.body.classList.remove(CSS['ui-item-no-drop']);
+    _this._onItemMouseUp = function (event) {
+      if (_this._dragTrigger.mouseDown) {
+        _this._dragTrigger.mouseDown = false;
       }
-
-      if (_this._overlappingList) {
-        _this._overlappingList.dispatchEvent(new CustomEvent('drop', {
-          bubbles: true,
-          cancelable: true,
-          detail: {
-            item: _assertThisInitialized(_this),
-            list: _this.listComponent
-          }
-        }));
-      }
-
-      (_this$props$onItemDra2 = (_this$props2 = _this.props).onItemDragEnd) === null || _this$props$onItemDra2 === void 0 ? void 0 : _this$props$onItemDra2.call(_this$props2, {
-        item: _assertThisInitialized(_this),
-        pageX: event.pageX,
-        pageY: event.pageY,
-        clientX: event.clientX,
-        clientY: event.clientY
-      });
-      _this._overlappingList = null;
-      _this._isDragging = false;
-
-      if (_this._itemRef) {
-        _this._itemRef.style.display = '';
-        _this._itemRef.hidden = false;
-      }
-
-      _this._clonedItem = null;
-      (_this$_draggedElement = _this._draggedElement) === null || _this$_draggedElement === void 0 ? void 0 : _this$_draggedElement.remove();
-      _this._draggedElement = null;
     };
 
-    _this._onDragStart = function (event) {
-      var _this$props$onItemDra3, _this$props3;
-
-      if (_this._isDragging) return;
-      event.preventDefault();
-      event.stopPropagation();
-      _this._clonedItem = null;
-      _this._beforeDragRect = _this._itemRef.getBoundingClientRect();
-      _this._groupListElements = document.querySelectorAll("." + _this.listComponent.model.groupID);
-
-      if (!_this._halfWidth && !_this._halfHeight) {
-        _this._halfWidth = _this._beforeDragRect.width / 2;
-        _this._halfHeight = _this._beforeDragRect.height / 2;
-      }
-
-      _this._offset = {
-        x: event.clientX - _this._beforeDragRect.left - _this._halfWidth,
-        y: event.clientY - _this._beforeDragRect.top - _this._halfHeight
-      };
-      var dragX = event.pageX - _this._halfWidth - _this._offset.x;
-      var dragY = event.pageY - _this._halfHeight - _this._offset.y;
-      _this._isDragging = true;
-      _this.draggedElement.style.position = 'absolute';
-      _this.draggedElement.style.left = dragX + "px";
-      _this.draggedElement.style.top = dragY + "px";
-      document.body.appendChild(_this.draggedElement);
-      _this._itemRef.style.display = 'none';
-      _this._itemRef.hidden = true;
-      (_this$props$onItemDra3 = (_this$props3 = _this.props).onItemDragStart) === null || _this$props$onItemDra3 === void 0 ? void 0 : _this$props$onItemDra3.call(_this$props3, {
-        item: _assertThisInitialized(_this),
-        dragX: dragX,
-        dragY: dragY,
-        pageX: event.pageX,
-        pageY: event.pageY,
-        clientX: event.clientX,
-        clientY: event.clientY
+    _this._onItemMouseDown = function (event) {
+      var input = isTouchDevice() ? event.changedTouches[0] : event;
+      var firstMatch = document.elementsFromPoint(input.clientX, input.clientY).find(function (e) {
+        return e.classList.contains('ui-reorderable-item');
       });
-
-      _this._checkOverlappingElements();
+      if (firstMatch !== _this._itemRef || _this._dragTrigger.mouseDown) return;
+      _this._dragTrigger.mouseDown = true;
+      _this._dragTrigger.prevX = input.pageX;
+      _this._dragTrigger.prevY = input.pageY;
     };
@@ -273,2 +211,19 @@
     };
+    _this._dragTrigger = {
+      mouseDown: false,
+      prevX: 0,
+      prevY: 0
+    };
+    _this._inputEvents = {
+      touch: {
+        down: 'touchstart',
+        up: 'touchend',
+        move: 'touchmove'
+      },
+      click: {
+        down: 'mousedown',
+        up: 'mouseup',
+        move: 'mousemove'
+      }
+    };
     _this._itemRef = null;
@@ -280,4 +235,8 @@ _this._isDragging = false;
     _this._model = new ListItem(props);
-    _this._onMouseMove = _this._onMouseMove.bind(_assertThisInitialized(_this));
-    _this._onMouseUp = _this._onMouseUp.bind(_assertThisInitialized(_this));
+    _this._onItemMouseMove = _this._onItemMouseMove.bind(_assertThisInitialized(_this));
+    _this._onItemMouseUp = _this._onItemMouseUp.bind(_assertThisInitialized(_this));
+    _this._onItemMouseDown = _this._onItemMouseDown.bind(_assertThisInitialized(_this));
+    _this._handleDrag = _this._handleDrag.bind(_assertThisInitialized(_this));
+    _this._handleDragStart = _this._handleDragStart.bind(_assertThisInitialized(_this));
+    _this._handleDragEnd = _this._handleDragEnd.bind(_assertThisInitialized(_this));
     _this._itemRef = React.createRef();
@@ -290,9 +249,29 @@ return _this;
   _proto.componentDidMount = function componentDidMount() {
-    document.addEventListener('mousemove', this._onMouseMove);
-    document.addEventListener('mouseup', this._onMouseUp);
+    var inputControl = isTouchDevice() ? 'touch' : 'click';
+    var inputEvents = this._inputEvents[inputControl];
+    document.addEventListener(inputEvents.move, this._handleDrag, {
+      passive: false
+    });
+    document.addEventListener(inputEvents.up, this._handleDragEnd);
+
+    this._itemRef.addEventListener(inputEvents.down, this._onItemMouseDown);
+
+    this._itemRef.addEventListener(inputEvents.move, this._onItemMouseMove);
+
+    this._itemRef.addEventListener(inputEvents.up, this._onItemMouseUp);
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('mousemove', this._onMouseMove);
-    document.removeEventListener('mouseup', this._onMouseUp);
+    var inputControl = isTouchDevice() ? 'touch' : 'click';
+    var inputEvents = this._inputEvents[inputControl];
+    document.removeEventListener(inputEvents.move, this._handleDrag, {
+      passive: false
+    });
+    document.removeEventListener(inputEvents.up, this._handleDragEnd);
+
+    this._itemRef.removeEventListener(inputEvents.down, this._onItemMouseDown);
+
+    this._itemRef.removeEventListener(inputEvents.move, this._onItemMouseMove);
+
+    this._itemRef.removeEventListener(inputEvents.up, this._onItemMouseUp);
   };
@@ -309,5 +288,5 @@
   _proto._checkOverlappingElements = function _checkOverlappingElements() {
-    var list = this._groupListElements;
+    var list = Array.prototype.slice.call(this._groupListElements);
     var previousList = this._overlappingList;
-    this._overlappingList = getIntersectingElementOnList(this.draggedElement, [].concat(list));
+    this._overlappingList = getIntersectingElementOnList(this.draggedElement, list);
 
@@ -321,4 +300,4 @@ if (previousList && !this._overlappingList) {
     if (!this._overlappingList) {
-      if (!document.body.classList.contains(CSS['ui-item-no-drop'])) {
-        document.body.classList.add(CSS['ui-item-no-drop']);
+      if (!document.body.classList.contains(styles.noDrop)) {
+        document.body.classList.add(styles.noDrop);
       }
@@ -340,4 +319,4 @@
 
-      if (document.body.classList.contains(CSS['ui-item-no-drop'])) {
-        document.body.classList.remove(CSS['ui-item-no-drop']);
+      if (document.body.classList.contains(styles.noDrop)) {
+        document.body.classList.remove(styles.noDrop);
       }
@@ -351,2 +330,108 @@ }
 
+  _proto._handleDrag = function _handleDrag(event) {
+    var _this$props$onItemDra, _this$props;
+
+    if (!this._isDragging) return;
+    if (isTouchDevice()) event.preventDefault();
+    var input = isTouchDevice() ? event.changedTouches[0] : event;
+    var dragX = input.pageX - this._halfWidth - this._offset.x;
+    var dragY = input.pageY - this._halfHeight - this._offset.y;
+    this.draggedElement.style.left = dragX + "px";
+    this.draggedElement.style.top = dragY + "px";
+
+    this._checkOverlappingElements();
+
+    (_this$props$onItemDra = (_this$props = this.props).onItemDrag) === null || _this$props$onItemDra === void 0 ? void 0 : _this$props$onItemDra.call(_this$props, {
+      item: this,
+      dragX: dragX,
+      dragY: dragY,
+      pageX: input.pageX,
+      pageY: input.pageY,
+      clientX: input.clientX,
+      clientY: input.clientY
+    });
+  };
+
+  _proto._handleDragEnd = function _handleDragEnd(event) {
+    var _this$props$onItemDra2, _this$props2, _this$_draggedElement;
+
+    if (!this._isDragging) return;
+    var input = isTouchDevice() ? event.changedTouches[0] : event;
+
+    if (document.body.classList.contains(styles.noDrop)) {
+      document.body.classList.remove(styles.noDrop);
+    }
+
+    if (this._overlappingList) {
+      this._overlappingList.dispatchEvent(new CustomEvent('drop', {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          item: this,
+          list: this.listComponent
+        }
+      }));
+    }
+
+    (_this$props$onItemDra2 = (_this$props2 = this.props).onItemDragEnd) === null || _this$props$onItemDra2 === void 0 ? void 0 : _this$props$onItemDra2.call(_this$props2, {
+      item: this,
+      pageX: input.pageX,
+      pageY: input.pageY,
+      clientX: input.clientX,
+      clientY: input.clientY
+    });
+    this._overlappingList = null;
+    this._isDragging = false;
+
+    if (this._itemRef) {
+      this._itemRef.style.display = '';
+      this._itemRef.hidden = false;
+    }
+
+    this._clonedItem = null;
+    (_this$_draggedElement = this._draggedElement) === null || _this$_draggedElement === void 0 ? void 0 : _this$_draggedElement.remove();
+    this._draggedElement = null;
+  };
+
+  _proto._handleDragStart = function _handleDragStart(event) {
+    var _this$props$onItemDra3, _this$props3;
+
+    if (this._isDragging) return;
+    document.getSelection().empty();
+    var input = isTouchDevice() ? event.changedTouches[0] : event;
+    this._clonedItem = null;
+    this._beforeDragRect = this._itemRef.getBoundingClientRect();
+    this._groupListElements = document.querySelectorAll("." + this.listComponent.model.groupID);
+
+    if (!this._halfWidth && !this._halfHeight) {
+      this._halfWidth = this._beforeDragRect.width / 2;
+      this._halfHeight = this._beforeDragRect.height / 2;
+    }
+
+    this._offset = {
+      x: input.clientX - this._beforeDragRect.left - this._halfWidth,
+      y: input.clientY - this._beforeDragRect.top - this._halfHeight
+    };
+    var dragX = input.pageX - this._halfWidth - this._offset.x;
+    var dragY = input.pageY - this._halfHeight - this._offset.y;
+    this._isDragging = true;
+    this.draggedElement.style.position = 'absolute';
+    this.draggedElement.style.left = dragX + "px";
+    this.draggedElement.style.top = dragY + "px";
+    document.body.appendChild(this.draggedElement);
+    this._itemRef.style.display = 'none';
+    this._itemRef.hidden = true;
+    (_this$props$onItemDra3 = (_this$props3 = this.props).onItemDragStart) === null || _this$props$onItemDra3 === void 0 ? void 0 : _this$props$onItemDra3.call(_this$props3, {
+      item: this,
+      dragX: dragX,
+      dragY: dragY,
+      pageX: input.pageX,
+      pageY: input.pageY,
+      clientX: input.clientX,
+      clientY: input.clientY
+    });
+
+    this._checkOverlappingElements();
+  };
+
   _proto.render = function render() {
@@ -359,8 +444,6 @@ var _this$props$component,
     return /*#__PURE__*/React__default.createElement(Component, _extends({}, this.props.componentProps, {
-      className: ['ui-reorderable-item', this.listComponent.instanceID, this.model.instanceID, (_this$props$component = this.props.componentProps) === null || _this$props$component === void 0 ? void 0 : _this$props$component.className].join(' '),
+      className: ['ui-reorderable-item', styles.uiItem, this.listComponent.instanceID, this.instanceID, (_this$props$component = this.props.componentProps) === null || _this$props$component === void 0 ? void 0 : _this$props$component.className].join(' '),
       ref: function ref(_ref) {
         return _this2._itemRef = _ref;
-      },
-      onDragStart: this._onDragStart,
-      draggable: true
+      }
     }), React__default.Children.only(this.props.children));
@@ -617,9 +700,10 @@ };
     _this._onDragOver = function (event) {
-      var _this$itemPlaceholder;
-
+      if (!_this.itemPlaceholder) return;
       var item = event.detail.item;
       event.stopPropagation();
-      (_this$itemPlaceholder = _this.itemPlaceholder) === null || _this$itemPlaceholder === void 0 ? void 0 : _this$itemPlaceholder.remove();
-      var filteredItems = [].concat(_this.element.querySelectorAll(".ui-reorderable-item." + _this.instanceID + ":not([hidden])"));
 
+      _this.itemPlaceholder.remove();
+
+      var filteredItems = Array.prototype.slice.call(_this.element.querySelectorAll(".ui-reorderable-item." + _this.instanceID + ":not([hidden])"));
+
       if (filteredItems.length <= 0) {
@@ -643,3 +727,3 @@ _this.element.appendChild(_this.itemPlaceholder);
       event.stopPropagation();
-      var filteredItems = [].concat(_this.element.querySelectorAll(".ui-reorderable-item:not([hidden])"));
+      var filteredItems = Array.prototype.slice.call(_this.element.querySelectorAll(".ui-reorderable-item:not([hidden])"));
       var index = filteredItems.findIndex(function (item) {
@@ -767,2 +851,4 @@ return item.classList.contains('item-placeholder');
     get: function get() {
+      if (!this.currentDraggedItem) return null;
+
       if (!this._itemPlaceholder) {
@@ -769,0 +855,0 @@ var _this$props$placehold, _this$props;

dist/index.modern.js

@@ -1,2 +0,2 @@
-import React, { Component, createRef, ReactElement } from 'react';
+import React, { createRef, Component, ReactElement } from 'react';
 import ReactDOMServer from 'react-dom/server';
@@ -8,2 +8,56 @@ import cryptoRandomString from 'crypto-random-string';
 
+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 _extends() {
+  _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;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function distance(pointA, pointB) {
+  var xDiff = pointA.x - pointB.x;
+  var yDiff = pointA.y - pointB.y;
+  return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+}
+
 function insertBefore(container, referenceElement, newElement) {
@@ -16,10 +70,6 @@ container.insertBefore(newElement, referenceElement);
 function getClosestElement(nodeList, targetElement) {
-  let closestElement = nodeList[0];
-  let xDiff = nodeList[0].getBoundingClientRect().x - targetElement.getBoundingClientRect().x;
-  let yDiff = nodeList[0].getBoundingClientRect().y - targetElement.getBoundingClientRect().y;
-  let dist = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
-  nodeList.forEach(element => {
-    xDiff = element.getBoundingClientRect().x - targetElement.getBoundingClientRect().x;
-    yDiff = element.getBoundingClientRect().y - targetElement.getBoundingClientRect().y;
-    const currentDist = Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+  var closestElement = nodeList[0];
+  var dist = distance(closestElement.getBoundingClientRect(), targetElement.getBoundingClientRect());
+  nodeList.forEach(function (element) {
+    var currentDist = distance(element.getBoundingClientRect(), targetElement.getBoundingClientRect());
 
@@ -47,6 +97,5 @@ if (currentDist < dist) {
 function getIntersectingElementOnList(target, list) {
-  const targetRect = target.getBoundingClientRect();
-  list = [...list];
-  list = list.filter(node => {
-    const nodeRect = node.getBoundingClientRect();
+  var targetRect = target.getBoundingClientRect();
+  list = list.filter(function (node) {
+    var nodeRect = node.getBoundingClientRect();
     return intersectRect(nodeRect, targetRect);
@@ -57,8 +106,9 @@ });
 }
+function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+}
 
-class ListItem {
-  constructor(props) {
-    props = { ...ListItem._defaults,
-      ...props
-    };
+var ListItem = /*#__PURE__*/function () {
+  function ListItem(props) {
+    props = _extends({}, ListItem._defaults, props);
     this._itemIndex = props.itemIndex;
@@ -71,23 +121,28 @@ this._itemData = props.itemData;
 
-  get instanceID() {
-    return this._instanceID;
-  }
+  _createClass(ListItem, [{
+    key: "instanceID",
+    get: function get() {
+      return this._instanceID;
+    }
+  }, {
+    key: "data",
+    get: function get() {
+      return this._itemData;
+    },
+    set: function set(value) {
+      this._itemData = value;
+    }
+  }, {
+    key: "index",
+    get: function get() {
+      return this._itemIndex;
+    },
+    set: function set(value) {
+      this._itemIndex = value;
+    }
+  }]);
 
-  get data() {
-    return this._itemData;
-  }
+  return ListItem;
+}();
 
-  get index() {
-    return this._itemIndex;
-  }
-
-  set data(value) {
-    this._itemData = value;
-  }
-
-  set index(value) {
-    this._itemIndex = value;
-  }
-
-}
 ListItem._defaults = {
@@ -98,190 +153,133 @@ itemIndex: 0,
 
-var CSS = {"ui-item-no-drop":"_reorderable-item__ui-item-no-drop__2fWNB"};
+var styles = {"noDrop":"_2onRf","uiItem":"_3ks3y"};
 
-class ReOrderableItem extends Component {
-  constructor(props) {
-    super(props);
+var ReOrderableItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ReOrderableItem, _Component);
 
-    this._onMouseMove = event => {
-      var _this$props$onItemDra, _this$props;
+  function ReOrderableItem(props) {
+    var _this;
 
-      if (!this._isDragging) return;
-      const dragX = event.pageX - this._halfWidth - this._offset.x;
-      const dragY = event.pageY - this._halfHeight - this._offset.y;
-      this.draggedElement.style.left = `${dragX}px`;
-      this.draggedElement.style.top = `${dragY}px`;
+    _this = _Component.call(this, props) || this;
 
-      this._checkOverlappingElements();
+    _this._onItemMouseMove = function (event) {
+      var input = isTouchDevice() ? event.changedTouches[0] : event;
 
-      (_this$props$onItemDra = (_this$props = this.props).onItemDrag) === null || _this$props$onItemDra === void 0 ? void 0 : _this$props$onItemDra.call(_this$props, {
-        item: this,
-        dragX,
-        dragY,
-        pageX: event.pageX,
-        pageY: event.pageY,
-        clientX: event.clientX,
-        clientY: event.clientY
-      });
-    };
+      if (_this._dragTrigger.mouseDown && !_this._isDragging) {
+        var dist = distance({
+          x: input.pageX,
+          y: input.pageY
+        }, {
+          x: _this._dragTrigger.prevX,
+          y: _this._dragTrigger.prevY
+        });
 
-    this._onMouseUp = event => {
-      var _this$props$onItemDra2, _this$props2, _this$_draggedElement;
+        if (dist >= 1) {
+          _this._dragTrigger.mouseDown = false;
 
-      if (!this._isDragging) return;
-
-      if (document.body.classList.contains(CSS['ui-item-no-drop'])) {
-        document.body.classList.remove(CSS['ui-item-no-drop']);
+          _this._handleDragStart(event);
+        }
       }
+    };
 
-      if (this._overlappingList) {
-        this._overlappingList.dispatchEvent(new CustomEvent('drop', {
-          bubbles: true,
-          cancelable: true,
-          detail: {
-            item: this,
-            list: this.listComponent
-          }
-        }));
+    _this._onItemMouseUp = function (event) {
+      if (_this._dragTrigger.mouseDown) {
+        _this._dragTrigger.mouseDown = false;
       }
-
-      (_this$props$onItemDra2 = (_this$props2 = this.props).onItemDragEnd) === null || _this$props$onItemDra2 === void 0 ? void 0 : _this$props$onItemDra2.call(_this$props2, {
-        item: this,
-        pageX: event.pageX,
-        pageY: event.pageY,
-        clientX: event.clientX,
-        clientY: event.clientY
-      });
-      this._overlappingList = null;
-      this._isDragging = false;
-
-      if (this._itemRef) {
-        this._itemRef.style.display = '';
-        this._itemRef.hidden = false;
-      }
-
-      this._clonedItem = null;
-      (_this$_draggedElement = this._draggedElement) === null || _this$_draggedElement === void 0 ? void 0 : _this$_draggedElement.remove();
-      this._draggedElement = null;
     };
 
-    this._onDragStart = event => {
-      var _this$props$onItemDra3, _this$props3;
-
-      if (this._isDragging) return;
-      event.preventDefault();
-      event.stopPropagation();
-      this._clonedItem = null;
-      this._beforeDragRect = this._itemRef.getBoundingClientRect();
-      this._groupListElements = document.querySelectorAll(`.${this.listComponent.model.groupID}`);
-
-      if (!this._halfWidth && !this._halfHeight) {
-        this._halfWidth = this._beforeDragRect.width / 2;
-        this._halfHeight = this._beforeDragRect.height / 2;
-      }
-
-      this._offset = {
-        x: event.clientX - this._beforeDragRect.left - this._halfWidth,
-        y: event.clientY - this._beforeDragRect.top - this._halfHeight
-      };
-      const dragX = event.pageX - this._halfWidth - this._offset.x;
-      const dragY = event.pageY - this._halfHeight - this._offset.y;
-      this._isDragging = true;
-      this.draggedElement.style.position = 'absolute';
-      this.draggedElement.style.left = `${dragX}px`;
-      this.draggedElement.style.top = `${dragY}px`;
-      document.body.appendChild(this.draggedElement);
-      this._itemRef.style.display = 'none';
-      this._itemRef.hidden = true;
-      (_this$props$onItemDra3 = (_this$props3 = this.props).onItemDragStart) === null || _this$props$onItemDra3 === void 0 ? void 0 : _this$props$onItemDra3.call(_this$props3, {
-        item: this,
-        dragX,
-        dragY,
-        pageX: event.pageX,
-        pageY: event.pageY,
-        clientX: event.clientX,
-        clientY: event.clientY
+    _this._onItemMouseDown = function (event) {
+      var input = isTouchDevice() ? event.changedTouches[0] : event;
+      var firstMatch = document.elementsFromPoint(input.clientX, input.clientY).find(function (e) {
+        return e.classList.contains('ui-reorderable-item');
       });
-
-      this._checkOverlappingElements();
+      if (firstMatch !== _this._itemRef || _this._dragTrigger.mouseDown) return;
+      _this._dragTrigger.mouseDown = true;
+      _this._dragTrigger.prevX = input.pageX;
+      _this._dragTrigger.prevY = input.pageY;
     };
 
-    this._beforeDragRect = null;
-    this._halfWidth = null;
-    this._halfHeight = null;
-    this._offset = {
+    _this._beforeDragRect = null;
+    _this._halfWidth = null;
+    _this._halfHeight = null;
+    _this._offset = {
       x: 0,
       y: 0
     };
-    this._itemRef = null;
-    this._isDragging = false;
-    this._draggedElement = null;
-    this._overlappingList = null;
-    this._clonedItem = null;
-    this._model = new ListItem(props);
-    this._onMouseMove = this._onMouseMove.bind(this);
-    this._onMouseUp = this._onMouseUp.bind(this);
-    this._itemRef = createRef();
+    _this._dragTrigger = {
+      mouseDown: false,
+      prevX: 0,
+      prevY: 0
+    };
+    _this._inputEvents = {
+      touch: {
+        down: 'touchstart',
+        up: 'touchend',
+        move: 'touchmove'
+      },
+      click: {
+        down: 'mousedown',
+        up: 'mouseup',
+        move: 'mousemove'
+      }
+    };
+    _this._itemRef = null;
+    _this._isDragging = false;
+    _this._draggedElement = null;
+    _this._overlappingList = null;
+    _this._clonedItem = null;
+    _this._model = new ListItem(props);
+    _this._onItemMouseMove = _this._onItemMouseMove.bind(_assertThisInitialized(_this));
+    _this._onItemMouseUp = _this._onItemMouseUp.bind(_assertThisInitialized(_this));
+    _this._onItemMouseDown = _this._onItemMouseDown.bind(_assertThisInitialized(_this));
+    _this._handleDrag = _this._handleDrag.bind(_assertThisInitialized(_this));
+    _this._handleDragStart = _this._handleDragStart.bind(_assertThisInitialized(_this));
+    _this._handleDragEnd = _this._handleDragEnd.bind(_assertThisInitialized(_this));
+    _this._itemRef = createRef();
+    return _this;
   }
 
-  get instanceID() {
-    return this._model.instanceID;
-  }
+  var _proto = ReOrderableItem.prototype;
 
-  get model() {
-    return this._model;
-  }
+  _proto.componentDidMount = function componentDidMount() {
+    var inputControl = isTouchDevice() ? 'touch' : 'click';
+    var inputEvents = this._inputEvents[inputControl];
+    document.addEventListener(inputEvents.move, this._handleDrag, {
+      passive: false
+    });
+    document.addEventListener(inputEvents.up, this._handleDragEnd);
 
-  get draggedElement() {
-    if (!this._draggedElement) {
-      var _this$props$drag, _this$props4;
+    this._itemRef.addEventListener(inputEvents.down, this._onItemMouseDown);
 
-      const element = (_this$props$drag = (_this$props4 = this.props).drag) === null || _this$props$drag === void 0 ? void 0 : _this$props$drag.call(_this$props4, this);
-      this._draggedElement = React.isValidElement(element) ? JSXToDOMElement(element) : element;
-    }
+    this._itemRef.addEventListener(inputEvents.move, this._onItemMouseMove);
 
-    return this._draggedElement;
-  }
+    this._itemRef.addEventListener(inputEvents.up, this._onItemMouseUp);
+  };
 
-  get listComponent() {
-    return this.props.list;
-  }
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    var inputControl = isTouchDevice() ? 'touch' : 'click';
+    var inputEvents = this._inputEvents[inputControl];
+    document.removeEventListener(inputEvents.move, this._handleDrag, {
+      passive: false
+    });
+    document.removeEventListener(inputEvents.up, this._handleDragEnd);
 
-  get overlappingListElement() {
-    return this._overlappingList;
-  }
+    this._itemRef.removeEventListener(inputEvents.down, this._onItemMouseDown);
 
-  get clonedItemElement() {
-    if (!this._clonedItem) {
-      this._clonedItem = this._itemRef.cloneNode(true);
-    }
+    this._itemRef.removeEventListener(inputEvents.move, this._onItemMouseMove);
 
-    return this._clonedItem;
-  }
+    this._itemRef.removeEventListener(inputEvents.up, this._onItemMouseUp);
+  };
 
-  get rect() {
-    return this._beforeDragRect;
-  }
-
-  componentDidMount() {
-    document.addEventListener('mousemove', this._onMouseMove);
-    document.addEventListener('mouseup', this._onMouseUp);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousemove', this._onMouseMove);
-    document.removeEventListener('mouseup', this._onMouseUp);
-  }
-
-  _dispatchCustomEvent(targetElement, event, detail) {
+  _proto._dispatchCustomEvent = function _dispatchCustomEvent(targetElement, event, detail) {
     targetElement.dispatchEvent(new CustomEvent(event, {
       bubbles: true,
       cancelable: true,
-      detail
+      detail: detail
     }));
-  }
+  };
 
-  _checkOverlappingElements() {
-    const list = this._groupListElements;
-    const previousList = this._overlappingList;
-    this._overlappingList = getIntersectingElementOnList(this.draggedElement, [...list]);
+  _proto._checkOverlappingElements = function _checkOverlappingElements() {
+    var list = Array.prototype.slice.call(this._groupListElements);
+    var previousList = this._overlappingList;
+    this._overlappingList = getIntersectingElementOnList(this.draggedElement, list);
 
@@ -295,4 +293,4 @@ if (previousList && !this._overlappingList) {
     if (!this._overlappingList) {
-      if (!document.body.classList.contains(CSS['ui-item-no-drop'])) {
-        document.body.classList.add(CSS['ui-item-no-drop']);
+      if (!document.body.classList.contains(styles.noDrop)) {
+        document.body.classList.add(styles.noDrop);
       }
@@ -314,4 +312,4 @@
 
-      if (document.body.classList.contains(CSS['ui-item-no-drop'])) {
-        document.body.classList.remove(CSS['ui-item-no-drop']);
+      if (document.body.classList.contains(styles.noDrop)) {
+        document.body.classList.remove(styles.noDrop);
       }
@@ -323,27 +321,184 @@ }
     });
-  }
+  };
 
-  render() {
-    var _this$props$component;
+  _proto._handleDrag = function _handleDrag(event) {
+    var _this$props$onItemDra, _this$props;
 
-    const Component = this.props.component;
+    if (!this._isDragging) return;
+    if (isTouchDevice()) event.preventDefault();
+    var input = isTouchDevice() ? event.changedTouches[0] : event;
+    var dragX = input.pageX - this._halfWidth - this._offset.x;
+    var dragY = input.pageY - this._halfHeight - this._offset.y;
+    this.draggedElement.style.left = dragX + "px";
+    this.draggedElement.style.top = dragY + "px";
+
+    this._checkOverlappingElements();
+
+    (_this$props$onItemDra = (_this$props = this.props).onItemDrag) === null || _this$props$onItemDra === void 0 ? void 0 : _this$props$onItemDra.call(_this$props, {
+      item: this,
+      dragX: dragX,
+      dragY: dragY,
+      pageX: input.pageX,
+      pageY: input.pageY,
+      clientX: input.clientX,
+      clientY: input.clientY
+    });
+  };
+
+  _proto._handleDragEnd = function _handleDragEnd(event) {
+    var _this$props$onItemDra2, _this$props2, _this$_draggedElement;
+
+    if (!this._isDragging) return;
+    var input = isTouchDevice() ? event.changedTouches[0] : event;
+
+    if (document.body.classList.contains(styles.noDrop)) {
+      document.body.classList.remove(styles.noDrop);
+    }
+
+    if (this._overlappingList) {
+      this._overlappingList.dispatchEvent(new CustomEvent('drop', {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          item: this,
+          list: this.listComponent
+        }
+      }));
+    }
+
+    (_this$props$onItemDra2 = (_this$props2 = this.props).onItemDragEnd) === null || _this$props$onItemDra2 === void 0 ? void 0 : _this$props$onItemDra2.call(_this$props2, {
+      item: this,
+      pageX: input.pageX,
+      pageY: input.pageY,
+      clientX: input.clientX,
+      clientY: input.clientY
+    });
+    this._overlappingList = null;
+    this._isDragging = false;
+
+    if (this._itemRef) {
+      this._itemRef.style.display = '';
+      this._itemRef.hidden = false;
+    }
+
+    this._clonedItem = null;
+    (_this$_draggedElement = this._draggedElement) === null || _this$_draggedElement === void 0 ? void 0 : _this$_draggedElement.remove();
+    this._draggedElement = null;
+  };
+
+  _proto._handleDragStart = function _handleDragStart(event) {
+    var _this$props$onItemDra3, _this$props3;
+
+    if (this._isDragging) return;
+    document.getSelection().empty();
+    var input = isTouchDevice() ? event.changedTouches[0] : event;
+    this._clonedItem = null;
+    this._beforeDragRect = this._itemRef.getBoundingClientRect();
+    this._groupListElements = document.querySelectorAll("." + this.listComponent.model.groupID);
+
+    if (!this._halfWidth && !this._halfHeight) {
+      this._halfWidth = this._beforeDragRect.width / 2;
+      this._halfHeight = this._beforeDragRect.height / 2;
+    }
+
+    this._offset = {
+      x: input.clientX - this._beforeDragRect.left - this._halfWidth,
+      y: input.clientY - this._beforeDragRect.top - this._halfHeight
+    };
+    var dragX = input.pageX - this._halfWidth - this._offset.x;
+    var dragY = input.pageY - this._halfHeight - this._offset.y;
+    this._isDragging = true;
+    this.draggedElement.style.position = 'absolute';
+    this.draggedElement.style.left = dragX + "px";
+    this.draggedElement.style.top = dragY + "px";
+    document.body.appendChild(this.draggedElement);
+    this._itemRef.style.display = 'none';
+    this._itemRef.hidden = true;
+    (_this$props$onItemDra3 = (_this$props3 = this.props).onItemDragStart) === null || _this$props$onItemDra3 === void 0 ? void 0 : _this$props$onItemDra3.call(_this$props3, {
+      item: this,
+      dragX: dragX,
+      dragY: dragY,
+      pageX: input.pageX,
+      pageY: input.pageY,
+      clientX: input.clientX,
+      clientY: input.clientY
+    });
+
+    this._checkOverlappingElements();
+  };
+
+  _proto.render = function render() {
+    var _this$props$component,
+        _this2 = this;
+
+    var Component = this.props.component;
     this._model = new ListItem(this.props);
-    return /*#__PURE__*/React.createElement(Component, Object.assign({}, this.props.componentProps, {
-      className: ['ui-reorderable-item', this.listComponent.instanceID, this.model.instanceID, (_this$props$component = this.props.componentProps) === null || _this$props$component === void 0 ? void 0 : _this$props$component.className].join(' '),
-      ref: ref => this._itemRef = ref,
-      onDragStart: this._onDragStart,
-      draggable: true
+    return /*#__PURE__*/React.createElement(Component, _extends({}, this.props.componentProps, {
+      className: ['ui-reorderable-item', styles.uiItem, this.listComponent.instanceID, this.instanceID, (_this$props$component = this.props.componentProps) === null || _this$props$component === void 0 ? void 0 : _this$props$component.className].join(' '),
+      ref: function ref(_ref) {
+        return _this2._itemRef = _ref;
+      }
     }), React.Children.only(this.props.children));
-  }
+  };
 
-}
+  _createClass(ReOrderableItem, [{
+    key: "instanceID",
+    get: function get() {
+      return this._model.instanceID;
+    }
+  }, {
+    key: "model",
+    get: function get() {
+      return this._model;
+    }
+  }, {
+    key: "draggedElement",
+    get: function get() {
+      if (!this._draggedElement) {
+        var _this$props$drag, _this$props4;
+
+        var element = (_this$props$drag = (_this$props4 = this.props).drag) === null || _this$props$drag === void 0 ? void 0 : _this$props$drag.call(_this$props4, this);
+        this._draggedElement = React.isValidElement(element) ? JSXToDOMElement(element) : element;
+      }
+
+      return this._draggedElement;
+    }
+  }, {
+    key: "listComponent",
+    get: function get() {
+      return this.props.list;
+    }
+  }, {
+    key: "overlappingListElement",
+    get: function get() {
+      return this._overlappingList;
+    }
+  }, {
+    key: "clonedItemElement",
+    get: function get() {
+      if (!this._clonedItem) {
+        this._clonedItem = this._itemRef.cloneNode(true);
+      }
+
+      return this._clonedItem;
+    }
+  }, {
+    key: "rect",
+    get: function get() {
+      return this._beforeDragRect;
+    }
+  }]);
+
+  return ReOrderableItem;
+}(Component);
+
 ReOrderableItem.defaultProps = {
-  drag: item => {
-    const itemCopy = item.clonedItemElement;
-    itemCopy.style.width = `${item.rect.width}px`;
-    itemCopy.style.height = `${item.rect.height}px`;
+  drag: function drag(item) {
+    var itemCopy = item.clonedItemElement;
+    itemCopy.style.width = item.rect.width + "px";
+    itemCopy.style.height = item.rect.height + "px";
     itemCopy.style.zIndex = '9000';
     return itemCopy;
   },
-  component: `div`,
+  component: "div",
   componentProps: null,
@@ -356,6 +511,6 @@ itemIndex: 0,
   path = path + '';
-  const tokens = path.split('.');
-  let currentProperty = object;
+  var tokens = path.split('.');
+  var currentProperty = object;
 
-  for (let i = 0; i < tokens.length; i++) {
+  for (var i = 0; i < tokens.length; i++) {
     currentProperty = currentProperty[tokens[i]];
@@ -370,3 +525,5 @@ }
 
-  while (path.length > 1) object = object[path.shift()];
+  while (path.length > 1) {
+    object = object[path.shift()];
+  }
 
@@ -376,7 +533,5 @@ return object[path.shift()] = newValue;
 
-class List {
-  constructor(props) {
-    props = { ...List._defaults,
-      ...props
-    };
+var List = /*#__PURE__*/function () {
+  function List(props) {
+    props = _extends({}, List._defaults, props);
     this._name = props.name;
@@ -393,50 +548,61 @@ this._list = props.list;
 
-  get group() {
-    return this._group;
-  }
+  _createClass(List, [{
+    key: "group",
+    get: function get() {
+      return this._group;
+    },
+    set: function set(value) {
+      this._group = value;
+    }
+  }, {
+    key: "groupID",
+    get: function get() {
+      return this._groupID;
+    }
+  }, {
+    key: "instanceID",
+    get: function get() {
+      return this._instanceID;
+    }
+  }, {
+    key: "listData",
+    get: function get$1() {
+      return this._group ? get(this._path, this._group) : this._list;
+    },
+    set: function set$1(value) {
+      this._group ? set(this._path, this._group, value) : this._list = value;
+      this._listItems = this.listData.map(function (data, index) {
+        return new ListItem({
+          itemData: data,
+          itemIndex: index
+        });
+      });
+    }
+  }, {
+    key: "listItems",
+    get: function get() {
+      if (!this._listItems) {
+        this._listItems = this.listData.map(function (data, index) {
+          return new ListItem({
+            itemData: data,
+            itemIndex: index
+          });
+        });
+      }
 
-  get groupID() {
-    return this._groupID;
-  }
-
-  get instanceID() {
-    return this._instanceID;
-  }
-
-  get listData() {
-    return this._group ? get(this._path, this._group) : this._list;
-  }
-
-  get listItems() {
-    if (!this._listItems) {
-      this._listItems = this.listData.map((data, index) => new ListItem({
-        itemData: data,
-        itemIndex: index
-      }));
+      return this._listItems;
     }
+  }, {
+    key: "path",
+    get: function get() {
+      return this._path;
+    },
+    set: function set(value) {
+      this._path = value;
+    }
+  }]);
 
-    return this._listItems;
-  }
+  return List;
+}();
 
-  get path() {
-    return this._path;
-  }
-
-  set group(value) {
-    this._group = value;
-  }
-
-  set listData(value) {
-    this._group ? set(this._path, this._group, value) : this._list = value;
-    this._listItems = this.listData.map((data, index) => new ListItem({
-      itemData: data,
-      itemIndex: index
-    }));
-  }
-
-  set path(value) {
-    this._path = value;
-  }
-
-}
 List._defaults = {
@@ -449,19 +615,17 @@ name: '',
 
-class ListController {
-  constructor(props) {
+var ListController = /*#__PURE__*/function () {
+  function ListController(props) {
     this._model = new List(props);
   }
 
-  get model() {
-    return this._model;
-  }
+  var _proto = ListController.prototype;
 
-  moveItem(sourceItem, targetIndex) {
-    let targetList = [...this.model.listData];
-    const itemIndex = sourceItem.index;
+  _proto.moveItem = function moveItem(sourceItem, targetIndex) {
+    var targetList = [].concat(this.model.listData);
+    var itemIndex = sourceItem.index;
     targetList = arrayMove(targetList, itemIndex, targetIndex);
-    let params = [targetList, this.model.path];
+    var params = [targetList, this.model.path];
 
     if (this.model.group) {
-      const groupCopy = [...this.model.group];
+      var groupCopy = [].concat(this.model.group);
       set(this.model.path, groupCopy, targetList);
@@ -472,11 +636,13 @@ params = [groupCopy];
     return params;
-  }
+  };
 
-  transferItem(sourceItem, sourceList, targetIndex) {
-    let targetList = [...this.model.listData];
-    const itemData = sourceItem.data;
-    const itemIndex = sourceItem.index;
-    const sourceListPath = sourceList.path;
-    const groupCopy = [...this.model.group];
-    const sourceListData = sourceList.listData.filter((item, index) => index !== itemIndex);
+  _proto.transferItem = function transferItem(sourceItem, sourceList, targetIndex) {
+    var targetList = [].concat(this.model.listData);
+    var itemData = sourceItem.data;
+    var itemIndex = sourceItem.index;
+    var sourceListPath = sourceList.path;
+    var groupCopy = [].concat(this.model.group);
+    var sourceListData = sourceList.listData.filter(function (item, index) {
+      return index !== itemIndex;
+    });
     targetList.push(itemData);
@@ -487,5 +653,5 @@ targetList = arrayMove(targetList, targetList.length - 1, targetIndex);
     return [groupCopy];
-  }
+  };
 
-  updateList(sourceItem, sourceList, targetIndex) {
+  _proto.updateList = function updateList(sourceItem, sourceList, targetIndex) {
     sourceList = !sourceList ? this.model : sourceList;
@@ -498,118 +664,88 @@
     return this.transferItem(sourceItem, sourceList, targetIndex);
-  }
+  };
 
-}
+  _createClass(ListController, [{
+    key: "model",
+    get: function get() {
+      return this._model;
+    }
+  }]);
 
-class ReOrderableList extends Component {
-  constructor(props) {
-    super(props);
+  return ListController;
+}();
 
-    this._onItemDragStart = ({
-      item
-    }) => {
-      this._initDragData(item);
+var ReOrderableList = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ReOrderableList, _Component);
+
+  function ReOrderableList(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _this._onItemDragStart = function (_ref) {
+      var item = _ref.item;
+
+      _this._initDragData(item);
     };
 
-    this._onItemDragEnd = () => {
-      this._resetDragData();
+    _this._onItemDragEnd = function () {
+      _this._resetDragData();
     };
 
-    this._onDragExit = () => {
-      this._removePlaceholders();
+    _this._onDragExit = function () {
+      _this._removePlaceholders();
     };
 
-    this._onDragOver = event => {
-      var _this$itemPlaceholder;
-
-      const {
-        item
-      } = event.detail;
+    _this._onDragOver = function (event) {
+      if (!_this.itemPlaceholder) return;
+      var item = event.detail.item;
       event.stopPropagation();
-      (_this$itemPlaceholder = this.itemPlaceholder) === null || _this$itemPlaceholder === void 0 ? void 0 : _this$itemPlaceholder.remove();
-      const filteredItems = [...this.element.querySelectorAll(`.ui-reorderable-item.${this.instanceID}:not([hidden])`)];
 
+      _this.itemPlaceholder.remove();
+
+      var filteredItems = Array.prototype.slice.call(_this.element.querySelectorAll(".ui-reorderable-item." + _this.instanceID + ":not([hidden])"));
+
       if (filteredItems.length <= 0) {
-        this.element.appendChild(this.itemPlaceholder);
+        _this.element.appendChild(_this.itemPlaceholder);
+
         return;
       }
 
-      const closestElement = getClosestElement(filteredItems, item.draggedElement);
-      const closestElementRect = closestElement.getBoundingClientRect();
-      const draggedElementRect = item.draggedElement.getBoundingClientRect();
-      const draggedElementAxis = Math.floor(draggedElementRect[this.orientationSettings.axis]);
-      const closestRectYAxis = Math.floor(closestElementRect[this.orientationSettings.axis] + closestElementRect[this.orientationSettings.size] / 2);
-      const insertFunction = closestRectYAxis > draggedElementAxis ? insertBefore : insertAfter;
-      insertFunction(this.element, closestElement, this.itemPlaceholder);
+      var closestElement = getClosestElement(filteredItems, item.draggedElement);
+      var closestElementRect = closestElement.getBoundingClientRect();
+      var draggedElementRect = item.draggedElement.getBoundingClientRect();
+      var draggedElementAxis = Math.floor(draggedElementRect[_this.orientationSettings.axis]);
+      var closestRectYAxis = Math.floor(closestElementRect[_this.orientationSettings.axis] + closestElementRect[_this.orientationSettings.size] / 2);
+      var insertFunction = closestRectYAxis > draggedElementAxis ? insertBefore : insertAfter;
+      insertFunction(_this.element, closestElement, _this.itemPlaceholder);
     };
 
-    this._onDrop = event => {
-      const {
-        item
-      } = event.detail;
+    _this._onDrop = function (event) {
+      var item = event.detail.item;
       event.stopPropagation();
-      const filteredItems = [...this.element.querySelectorAll(`.ui-reorderable-item:not([hidden])`)];
-      const index = filteredItems.findIndex(item => item.classList.contains('item-placeholder'));
+      var filteredItems = Array.prototype.slice.call(_this.element.querySelectorAll(".ui-reorderable-item:not([hidden])"));
+      var index = filteredItems.findIndex(function (item) {
+        return item.classList.contains('item-placeholder');
+      });
 
-      this._updateList(item, index);
+      _this._updateList(item, index);
     };
 
-    this._itemPlaceholder = null;
-    this._controller = new ListController(props);
+    _this._itemPlaceholder = null;
+    _this._controller = new ListController(props);
+    return _this;
   }
 
-  get instanceID() {
-    return this.controller.model.instanceID;
-  }
+  var _proto = ReOrderableList.prototype;
 
-  get groupID() {
-    return this.controller.model.groupID;
-  }
+  _proto._initializeChildren = function _initializeChildren() {
+    var _this2 = this;
 
-  get controller() {
-    return this._controller;
-  }
-
-  get model() {
-    return this._controller.model;
-  }
-
-  get element() {
-    return this._listRef;
-  }
-
-  get currentDraggedItem() {
-    return ReOrderableList._currentDraggedItem;
-  }
-
-  get itemPlaceholder() {
-    if (!this._itemPlaceholder) {
-      var _this$props$placehold, _this$props;
-
-      const element = (_this$props$placehold = (_this$props = this.props).placeholder) === null || _this$props$placehold === void 0 ? void 0 : _this$props$placehold.call(_this$props, this.currentDraggedItem);
-      this._itemPlaceholder = React.isValidElement(element) ? JSXToDOMElement(element) : element;
-
-      if (!this._itemPlaceholder.classList.contains('ui-reorderable-item')) {
-        this._itemPlaceholder.classList.add('ui-reorderable-item');
-      }
-
-      if (!this._itemPlaceholder.classList.contains('item-placeholder')) {
-        this._itemPlaceholder.classList.add('item-placeholder');
-      }
-    }
-
-    return this._itemPlaceholder;
-  }
-
-  get orientationSettings() {
-    return ReOrderableList._orientationSettings[this.props.orientation];
-  }
-
-  _initializeChildren() {
-    let index = 0;
-    const childrenWithProps = React.Children.map(this.props.children, child => {
+    var index = 0;
+    var childrenWithProps = React.Children.map(this.props.children, function (child) {
       if (React.isValidElement(child) && child.type === ReOrderableItem) {
-        const props = {
-          list: this,
-          onItemDragStart: item => {
-            this._onItemDragStart(item);
+        var props = {
+          list: _this2,
+          onItemDragStart: function onItemDragStart(item) {
+            _this2._onItemDragStart(item);
 
@@ -620,4 +756,4 @@ if (child.props.onItemDragStart) {
           },
-          onItemDragEnd: item => {
-            this._onItemDragEnd(item);
+          onItemDragEnd: function onItemDragEnd(item) {
+            _this2._onItemDragEnd(item);
 
@@ -628,3 +764,3 @@ if (child.props.onItemDragEnd) {
           },
-          itemData: isEmpty(child.props.itemData) ? this.model.listData[index] : child.props.itemData,
+          itemData: isEmpty(child.props.itemData) ? _this2.model.listData[index] : child.props.itemData,
           itemIndex: isEmpty(child.props.itemIndex) ? index : child.props.itemIndex
@@ -639,16 +775,16 @@ };
     return childrenWithProps;
-  }
+  };
 
-  _updateList(item, targetIndex) {
+  _proto._updateList = function _updateList(item, targetIndex) {
     var _this$props$onListUpd;
 
-    const params = this.controller.updateList(item.model, item.listComponent.model, targetIndex);
+    var params = this.controller.updateList(item.model, item.listComponent.model, targetIndex);
     (_this$props$onListUpd = this.props.onListUpdate) === null || _this$props$onListUpd === void 0 ? void 0 : _this$props$onListUpd.apply(this, params);
-  }
+  };
 
-  _initDragData(item) {
+  _proto._initDragData = function _initDragData(item) {
     ReOrderableList._currentDraggedItem = item;
-  }
+  };
 
-  _resetDragData() {
+  _proto._resetDragData = function _resetDragData() {
     ReOrderableList._currentDraggedItem = null;
@@ -659,16 +795,19 @@
     this._itemPlaceholder = null;
-  }
+  };
 
-  _removePlaceholders() {
-    const placeholder = document.querySelector('.ui-reorderable-list .ui-reorderable-item.item-placeholder');
+  _proto._removePlaceholders = function _removePlaceholders() {
+    var placeholder = document.querySelector('.ui-reorderable-list .ui-reorderable-item.item-placeholder');
     placeholder === null || placeholder === void 0 ? void 0 : placeholder.remove();
-  }
+  };
 
-  render() {
-    var _this$props$component;
+  _proto.render = function render() {
+    var _this3 = this,
+        _this$props$component;
 
-    const CustomComponent = this.props.component;
+    var CustomComponent = this.props.component;
     this._controller = new ListController(this.props);
-    return /*#__PURE__*/React.createElement(CustomComponent, Object.assign({}, this.props.componentProps, {
-      ref: ref => this._listRef = ref,
+    return /*#__PURE__*/React.createElement(CustomComponent, _extends({}, this.props.componentProps, {
+      ref: function ref(_ref2) {
+        return _this3._listRef = _ref2;
+      },
       className: ['ui-reorderable-list', this.instanceID, this.groupID, (_this$props$component = this.props.componentProps) === null || _this$props$component === void 0 ? void 0 : _this$props$component.className].join(' '),
@@ -679,5 +818,66 @@ onDrop: this._onDrop,
     }), this._initializeChildren());
-  }
+  };
 
-}
+  _createClass(ReOrderableList, [{
+    key: "instanceID",
+    get: function get() {
+      return this.controller.model.instanceID;
+    }
+  }, {
+    key: "groupID",
+    get: function get() {
+      return this.controller.model.groupID;
+    }
+  }, {
+    key: "controller",
+    get: function get() {
+      return this._controller;
+    }
+  }, {
+    key: "model",
+    get: function get() {
+      return this._controller.model;
+    }
+  }, {
+    key: "element",
+    get: function get() {
+      return this._listRef;
+    }
+  }, {
+    key: "currentDraggedItem",
+    get: function get() {
+      return ReOrderableList._currentDraggedItem;
+    }
+  }, {
+    key: "itemPlaceholder",
+    get: function get() {
+      if (!this.currentDraggedItem) return null;
+
+      if (!this._itemPlaceholder) {
+        var _this$props$placehold, _this$props;
+
+        var element = (_this$props$placehold = (_this$props = this.props).placeholder) === null || _this$props$placehold === void 0 ? void 0 : _this$props$placehold.call(_this$props, this.currentDraggedItem);
+        this._itemPlaceholder = React.isValidElement(element) ? JSXToDOMElement(element) : element;
+
+        if (!this._itemPlaceholder.classList.contains('ui-reorderable-item')) {
+          this._itemPlaceholder.classList.add('ui-reorderable-item');
+        }
+
+        if (!this._itemPlaceholder.classList.contains('item-placeholder')) {
+          this._itemPlaceholder.classList.add('item-placeholder');
+        }
+      }
+
+      return this._itemPlaceholder;
+    }
+  }, {
+    key: "orientationSettings",
+    get: function get() {
+      return ReOrderableList._orientationSettings[this.props.orientation];
+    }
+  }]);
+
+  return ReOrderableList;
+}(Component);
+
 ReOrderableList.propTypes = {
@@ -695,3 +895,3 @@ name: PropTypes.string,
   name: '',
-  component: `div`,
+  component: "div",
   list: [],
@@ -701,7 +901,7 @@ path: 0,
   orientation: 'vertical',
-  placeholder: item => {
+  placeholder: function placeholder(item) {
     return /*#__PURE__*/React.createElement("div", {
       style: {
-        width: `${item.rect.width}px`,
-        height: `${item.rect.height}px`,
+        width: item.rect.width + "px",
+        height: item.rect.height + "px",
         backgroundColor: 'rgba(0, 0, 0, 0.1)'
@@ -724,25 +924,39 @@ }
 
-class ReOrderableListGroup extends Component {
-  constructor(...args) {
-    super(...args);
+var ReOrderableListGroup = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(ReOrderableListGroup, _Component);
 
-    this._onListUpdate = (newList, path) => {
+  function ReOrderableListGroup() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+
+    _this._onListUpdate = function (newList, path) {
       var _this$props$onListGro, _this$props;
 
-      const listCopy = [...this.props.group];
+      var listCopy = [].concat(_this.props.group);
       set(path, listCopy, newList);
-      (_this$props$onListGro = (_this$props = this.props).onListGroupUpdate) === null || _this$props$onListGro === void 0 ? void 0 : _this$props$onListGro.call(_this$props, listCopy);
+      (_this$props$onListGro = (_this$props = _this.props).onListGroupUpdate) === null || _this$props$onListGro === void 0 ? void 0 : _this$props$onListGro.call(_this$props, listCopy);
     };
+
+    return _this;
   }
 
-  _initializeChildren() {
-    let index = 0;
-    const childrenWithProps = React.Children.map(this.props.children, child => {
+  var _proto = ReOrderableListGroup.prototype;
+
+  _proto._initializeChildren = function _initializeChildren() {
+    var _this2 = this;
+
+    var index = 0;
+    var childrenWithProps = React.Children.map(this.props.children, function (child) {
       if (React.isValidElement(child) && child.type === ReOrderableList) {
-        const props = {
-          name: this.props.name,
-          list: isEmpty(child.props.list) ? get(index, this.props.group) : child.props.list,
+        var props = {
+          name: _this2.props.name,
+          list: isEmpty(child.props.list) ? get(index, _this2.props.group) : child.props.list,
           path: isEmpty(child.props.path) ? index : child.props.path,
-          onListUpdate: this._onListUpdate,
-          group: this.props.group
+          onListUpdate: _this2._onListUpdate,
+          group: _this2.props.group
         };
@@ -756,9 +970,11 @@ index++;
     return childrenWithProps;
-  }
+  };
 
-  render() {
+  _proto.render = function render() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, this._initializeChildren());
-  }
+  };
 
-}
+  return ReOrderableListGroup;
+}(Component);
+
 ReOrderableListGroup.defaultProps = {
@@ -765,0 +981,0 @@ name: 'list',

package.json

 {
   "name": "react-reorderable-list",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A simple UI framework friendly reorderable list component for React.",
@@ -26,6 +26,8 @@ "author": "samceracas",
     "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "test": "run-s test:unit test:lint test:build",
+    "prepare": "run-s build",
+    "test": "run-s test:unit test:e2e test:lint test:build",
     "test:build": "run-s build",
     "test:lint": "eslint .",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:e2e": "jest -c src/__tests__/e2e/jest.config.js",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom --modulePathIgnorePatterns=e2e",
     "test:watch": "react-scripts test --env=jsdom",
@@ -36,13 +38,14 @@ "predeploy": "cd example && yarn install && yarn run build",
   "peerDependencies": {
+    "array-move": "^3.0.1",
+    "crypto-random-string": "^3.3.0",
+    "is-empty": "^1.2.0",
+    "prop-types": "^15.7.2",
     "react": "^16.0.0",
-    "react-dom": "^16.13.1",
-    "prop-types": "^15.7.2",
-    "is-empty": "^1.2.0",
-    "array-move": "^3.0.1",
-    "crypto-random-string": "^3.3.0"
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "microbundle-crl": "^0.13.10",
+    "array-move": "^3.0.1",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
+    "crypto-random-string": "^3.3.0",
     "eslint": "^6.8.0",
@@ -59,15 +62,17 @@ "eslint-config-prettier": "^6.7.0",
     "gh-pages": "^2.2.0",
+    "is-empty": "^1.2.0",
+    "jest-puppeteer": "^4.4.0",
+    "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
+    "prop-types": "^15.7.2",
+    "puppeteer": "^5.3.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1",
-    "prop-types": "^15.7.2",
-    "is-empty": "^1.2.0",
-    "array-move": "^3.0.1",
-    "crypto-random-string": "^3.3.0"
+    "react-scripts": "^3.4.1"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {}
 }

README.md

@@ -6,2 +6,3 @@ # react-reorderable-list 📄
 [![NPM](https://img.shields.io/npm/v/react-reorderable-list.svg)](https://www.npmjs.com/package/react-reorderable-list) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Build Status](https://travis-ci.com/samceracas/react-reorderable-list.svg?branch=master)](https://travis-ci.com/samceracas/react-reorderable-list)
+[![Bundlephobia](https://badgen.net/bundlephobia/minzip/react-reorderable-list)](https://bundlephobia.com/result?p=react-reorderable-list@latest)
 
@@ -19,3 +20,15 @@ ## Install
 
-## Usage
+## Features
+ * Supports major browsers.
+ * Can transfer items from one list to another.
+ * Mobile and desktop devices supported.
+ * Horizontal or vertical oriented lists supported. (Even grids)
+ * UI framework friendly.
+ * Control over what the dragged item looks like.
+ * Customizable shadows when items are hovered on a list.
+
+## Examples
+You can head over to our [demo](https://samceracas.github.io/react-reorderable-list/) page to view usage with UI frameworks.
+
+## Supported Use Cases
 There are 2 types of lists available for use. You can use an ungrouped list if you don't want to transfer items between lists or you can use a grouped list which gives you the ability to transfer data from one list to another by dragging and dropping the list item.
@@ -25,3 +38,3 @@
 
-#### Wrapped reorderable list group
+#### Wrapped reorderable list group (Basic Usage)
 A group of lists wrapped within a ```ReOrderableListGroup```. Lists within the group can transfer data to each other. Provides  less setup and a cleaner configuration for generic grouped lists.
@@ -303,3 +316,3 @@
 | ```onListUpdate``` (Required)                                                                                    | Function | The callback function which passes the new value for ```group```.                            | ```undefined``` |
-| ```path``` (Optional)                                                                                    | String \| Number | The index or object path needed to access the list array from the group. This property is automatically set when wrapped within a ```ReOrderableListGroup``` using the index as the accessor the to the list array.| ```0``` 
+| ```path``` (Optional)                                                                                    | String \| Number | The index or object path needed to access the list array from the group. This property is automatically set when wrapped within a ```ReOrderableListGroup``` using the index as the accessor the to the list array.| ```0```
 | ```component``` (Optional) | String \| Component | Define a custom component for this list. | ```div``` |
@@ -310,3 +323,3 @@ | ```componentProps``` (Optional) | Object | The props for the component. | ```null``` |
 
- 
+
 ####  ReOrderableItem
@@ -337,2 +350,4 @@ | Property| Type| Description | Default |
 
+## Issues and Suggestions
+Hi! Your feedback for using this library is very valuable and if you have any issues or suggestions feel free to file them on the Issues page.
 
@@ -339,0 +354,0 @@ ## License

No alert changes

Improved metrics

Total package byte prevSize

213769

increased by11.54%

Lines of code

1638

increased by19.74%

Number of lines in readme file

351

increased by4.46%

Worsened metrics

Dev dependency count

25

increased by8.7%

No dependency changes