draggable-helper - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

dist/draggable-helper.cjs.js

 /*!
- * draggable-helper v2.0.0
- * (c) phphe <[e-mail]> (https://github.com/phphe)
+* draggable-helper v3.0.0
+* (c) phphe <[e-mail]> (https://github.com/phphe)
+* Released under the MIT License.
+*/
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+/*!
+* helper-js v1.4.13
+* (c) phphe <[e-mail]> (https://github.com/phphe)
+* Released under the MIT License.
+*/
+
+function getOffsetParent(el) {
+  var offsetParent = el.offsetParent;
+
+  if (!offsetParent || offsetParent === document.body && getComputedStyle(document.body).position === 'static') {
+    offsetParent = document.body.parentElement;
+  }
+
+  return offsetParent;
+} // get el current position. like jQuery.position
+// the position is relative to offsetParent viewport left top. it is for set absolute position, absolute position is relative to offsetParent viewport left top.
+// 相对于offsetParent可视区域左上角(el.offsetLeft或top包含父元素的滚动距离, 所以要减去). position一般用于设置绝对定位的情况, 而绝对定位就是以可视区域左上角为原点.
+
+function getPosition(el) {
+  var offsetParent = getOffsetParent(el);
+  var ps = {
+    x: el.offsetLeft,
+    y: el.offsetTop
+  };
+  var parent = el;
+
+  while (true) {
+    parent = parent.parentElement;
+
+    if (parent === offsetParent || !parent) {
+      break;
+    }
+
+    ps.x -= parent.scrollLeft;
+    ps.y -= parent.scrollTop;
+  }
+
+  return ps;
+} // get position of a el if its offset is given. like jQuery.offset.
+function getBoundingClientRect(el) {
+  // refer: http://www.51xuediannao.com/javascript/getBoundingClientRect.html
+  var xy = el.getBoundingClientRect();
+  var top = xy.top - document.documentElement.clientTop,
+      //document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0
+  bottom = xy.bottom,
+      left = xy.left - document.documentElement.clientLeft,
+      //document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0
+  right = xy.right,
+      width = xy.width || right - left,
+      //IE67不存在width 使用right - left获得
+  height = xy.height || bottom - top;
+  var x = left;
+  var y = top;
+  return {
+    top: top,
+    right: right,
+    bottom: bottom,
+    left: left,
+    width: width,
+    height: height,
+    x: x,
+    y: y
+  };
+}
+function findParent(el, callback, opt) {
+  var cur = opt && opt.withSelf ? el : el.parentElement;
+
+  while (cur) {
+    var r = callback(cur);
+
+    if (r === 'break') {
+      return;
+    } else if (r) {
+      return cur;
+    } else {
+      cur = cur.parentElement;
+    }
+  }
+}
+function backupAttr(el, name) {
+  var key = "original_".concat(name);
+  el[key] = el.getAttribute(name);
+}
+function restoreAttr(el, name) {
+  var key = "original_".concat(name);
+  el.setAttribute(name, el[key]);
+} // source: http://youmightnotneedjquery.com/
+
+function hasClass(el, className) {
+  if (el.classList) {
+    return el.classList.contains(className);
+  } else {
+    return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
+  }
+} // source: http://youmightnotneedjquery.com/
+
+function addClass(el, className) {
+  if (!hasClass(el, className)) {
+    if (el.classList) {
+      el.classList.add(className);
+    } else {
+      el.className += ' ' + className;
+    }
+  }
+} // source: http://youmightnotneedjquery.com/
+
+/*!
+ * helper-js v1.3.9
+ * (c) 2018-present phphe <[e-mail]> (https://github.com/phphe)
  * Released under the MIT License.
  */
-'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+function onDOM(el, name, handler) {
+  for (var _len5 = arguments.length, args = new Array(_len5 > 3 ? _len5 - 3 : 0), _key6 = 3; _key6 < _len5; _key6++) {
+    args[_key6 - 3] = arguments[_key6];
+  }
 
-var hp = require('helper-js');
-var DragEventService = _interopDefault(require('drag-event-service'));
+  if (el.addEventListener) {
+    // 所有主流浏览器，除了 IE 8 及更早 IE版本
+    el.addEventListener.apply(el, [name, handler].concat(args));
+  } else if (el.attachEvent) {
+    // IE 8 及更早 IE 版本
+    el.attachEvent.apply(el, ["on".concat(name), handler].concat(args));
+  }
+}
+function offDOM(el, name, handler) {
+  for (var _len6 = arguments.length, args = new Array(_len6 > 3 ? _len6 - 3 : 0), _key7 = 3; _key7 < _len6; _key7++) {
+    args[_key7 - 3] = arguments[_key7];
+  }
 
+  if (el.removeEventListener) {
+    // 所有主流浏览器，除了 IE 8 及更早 IE版本
+    el.removeEventListener.apply(el, [name, handler].concat(args));
+  } else if (el.detachEvent) {
+    // IE 8 及更早 IE 版本
+    el.detachEvent.apply(el, ["on".concat(name), handler].concat(args));
+  }
+}
+
+/*!
+ * drag-event-service v1.0.0
+ * (c) 2018-present phphe <[e-mail]> (https://github.com/phphe)
+ * Released under the MIT License.
+ */
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
+var events = {
+  start: ['mousedown', 'touchstart'],
+  move: ['mousemove', 'touchmove'],
+  end: ['mouseup', 'touchend']
+};
+var index = {
+  isTouch: function isTouch(e) {
+    return e.type && e.type.startsWith('touch');
+  },
+  _getStore: function _getStore(el) {
+    if (!el._wrapperStore) {
+      el._wrapperStore = [];
+    }
+
+    return el._wrapperStore;
+  },
+  on: function on(el, name, handler, options) {
+    var _hp$onDOM, _hp$onDOM2;
+
+    var _resolveOptions = resolveOptions(options),
+        args = _resolveOptions.args,
+        mouseArgs = _resolveOptions.mouseArgs,
+        touchArgs = _resolveOptions.touchArgs;
+
+    var store = this._getStore(el);
+
+    var ts = this;
+
+    var wrapper = function wrapper(e) {
+      var mouse;
+      var isTouch = ts.isTouch(e);
+
+      if (isTouch) {
+        // touch
+        mouse = {
+          x: e.changedTouches[0].pageX,
+          y: e.changedTouches[0].pageY
+        };
+      } else {
+        // mouse
+        mouse = {
+          x: e.pageX,
+          y: e.pageY
+        };
+
+        if (name === 'start' && e.which !== 1) {
+          // not left button mousedown
+          return;
+        }
+      }
+
+      return handler.call(this, e, mouse);
+    };
+
+    store.push({
+      handler: handler,
+      wrapper: wrapper
+    }); // follow format will cause big bundle size
+    // 以下写法将会使打包工具认为hp是上下文, 导致打包整个hp
+    // hp.onDOM(el, events[name][0], wrapper, ...args)
+
+    (_hp$onDOM = onDOM).call.apply(_hp$onDOM, [null, el, events[name][0], wrapper].concat(_toConsumableArray(args).concat(_toConsumableArray(mouseArgs))));
+
+    (_hp$onDOM2 = onDOM).call.apply(_hp$onDOM2, [null, el, events[name][1], wrapper].concat(_toConsumableArray(args).concat(_toConsumableArray(touchArgs))));
+  },
+  off: function off(el, name, handler, options) {
+    var _resolveOptions2 = resolveOptions(options),
+        args = _resolveOptions2.args,
+        mouseArgs = _resolveOptions2.mouseArgs;
+
+    var store = this._getStore(el);
+
+    for (var i = store.length - 1; i >= 0; i--) {
+      var _store$i = store[i],
+          handler2 = _store$i.handler,
+          wrapper = _store$i.wrapper;
+
+      if (handler === handler2) {
+        var _hp$offDOM, _hp$offDOM2;
+
+        (_hp$offDOM = offDOM).call.apply(_hp$offDOM, [null, el, events[name][0], wrapper].concat(_toConsumableArray(args).concat(_toConsumableArray(mouseArgs))));
+
+        (_hp$offDOM2 = offDOM).call.apply(_hp$offDOM2, [null, el, events[name][1], wrapper].concat(_toConsumableArray(args).concat(_toConsumableArray(mouseArgs))));
+
+        store.splice(i, 1);
+      }
+    }
+  }
+};
+
+function resolveOptions(options) {
+  if (!options) {
+    options = {};
+  }
+
+  var args = options.args || [];
+  var mouseArgs = options.mouseArgs || [];
+  var touchArgs = options.touchArgs || [];
+  return {
+    args: args,
+    mouseArgs: mouseArgs,
+    touchArgs: touchArgs
+  };
+}
+
 /***
 const destroy = draggableHelper(HTMLElement dragHandlerEl, Object opt = {})
-opt.drag(startEvent, moveEvent, opt, store) return false to prevent drag
-[Object] opt.style || opt.getStyle(opt, store) set style of moving el style
+opt.beforeDrag(startEvent, moveEvent, store, opt) return false to prevent drag
+opt.drag(startEvent, moveEvent, store, opt) return false to prevent drag
+[Object] opt.style || opt.getStyle(store, opt) set style of moving el style
 [Boolean] opt.clone
 opt.draggingClass, default dragging
-opt.moving(e, opt, store) return false can prevent moving
-opt.drop(e, opt, store)
-opt.getEl(dragHandlerEl, opt, store) get the el that will be moved. default is dragHandlerEl
-afterGetEl(opt, store)
+opt.moving(e, store, opt) return false can prevent moving
+opt.drop(e, store, opt)
+opt.getEl(dragHandlerEl, store, opt) get the el that will be moved. default is dragHandlerEl
 opt.minTranslate default 10, unit px
@@ -35,2 +351,4 @@ [Boolean] opt.triggerBySelf: false if trigger only by self, can not be triggered by children
   movedCount // start from 0
+  startEvent
+  endEvent
 }
@@ -41,10 +359,10 @@ e.g.
   data: this.data,
-  drag: (e, opt, store) => {
+  drag: (e, store, opt) => {
     dplh.style.height = store.el.querySelector('.TreeNodeSelf').offsetHeight + 'px'
     th.insertAfter(dplh, opt.data)
   },
-  moving: (e, opt, store) => {
+  moving: (e, store, opt) => {
     hp.arrayRemove(dplh.parent.children, dplh)
   },
-  drop: (e, opt, store) => {
+  drop: (e, store, opt) => {
     hp.arrayRemove(dplh.parent.children, dplh)
@@ -57,5 +375,5 @@ },
 var UNDRAGGABLE_CLASS = 'undraggable';
-function index (dragHandlerEl) {
+function index$1 (dragHandlerEl) {
   var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  opt = Object.assign({
+  opt = _objectSpread2({
     minTranslate: 10,
@@ -67,3 +385,3 @@ draggingClass: 'dragging'
   var destroy = function destroy() {
-    DragEventService.off(dragHandlerEl, 'start', dragHandlerEl._draggbleEventHandler);
+    index.off(dragHandlerEl, 'start', dragHandlerEl._draggbleEventHandler);
     delete dragHandlerEl._draggbleEventHandler;
@@ -77,3 +395,3 @@ };
   dragHandlerEl._draggbleEventHandler = start;
-  DragEventService.on(dragHandlerEl, 'start', start);
+  index.on(dragHandlerEl, 'start', start);
   return destroy;
@@ -91,8 +409,8 @@
 
-    if (hp.hasClass(e.target, UNDRAGGABLE_CLASS)) {
+    if (hasClass(e.target, UNDRAGGABLE_CLASS)) {
       return;
     }
 
-    var isParentUndraggable = hp.findParent(e.target, function (el) {
-      if (hp.hasClass(el, UNDRAGGABLE_CLASS)) {
+    var isParentUndraggable = findParent(e.target, function (el) {
+      if (hasClass(el, UNDRAGGABLE_CLASS)) {
         return true;
@@ -117,3 +435,3 @@ }
     store.startEvent = e;
-    store.initialMouse = Object.assign({}, store.mouse);
+    store.initialMouse = _objectSpread2({}, store.mouse);
     /*
@@ -124,3 +442,3 @@ must set passive false for touch, else the follow error occurs in Chrome:
 
-    DragEventService.on(document, 'move', moving, {
+    index.on(document, 'move', moving, {
       touchArgs: [{
@@ -130,9 +448,9 @@ passive: false
     });
-    DragEventService.on(window, 'end', drop);
+    index.on(window, 'end', drop);
   }
 
   function drag(e) {
-    var r = opt.drag && opt.drag(store.startEvent, e, opt, store);
+    var canDrag = opt.beforeDrag && opt.beforeDrag(store.startEvent, e, store, opt);
 
-    if (r === false) {
+    if (canDrag === false) {
       return false;
@@ -146,17 +464,24 @@ }
     store.el = el;
-    store.initialPosition = Object.assign({}, position);
-    opt.afterGetEl && opt.afterGetEl(opt, store); // dom actions
+    store.initialPosition = _objectSpread2({}, position);
+    canDrag = opt.drag && opt.drag(store.startEvent, e, store, opt);
 
-    var size = hp.getElSize(el);
-    var style = Object.assign({
-      width: "".concat(size.width, "px"),
-      height: "".concat(size.height, "px"),
+    if (canDrag === false) {
+      return false;
+    } // dom actions
+
+
+    var size = getBoundingClientRect(el);
+
+    var style = _objectSpread2({
+      width: "".concat(Math.ceil(size.width), "px"),
+      height: "".concat(Math.ceil(size.height), "px"),
       zIndex: 9999,
-      opacity: 0.6,
+      opacity: 0.8,
       position: 'absolute',
       left: position.x + 'px',
       top: position.y + 'px'
-    }, opt.style || opt.getStyle && opt.getStyle(opt, store) || {});
-    hp.backupAttr(el, 'style');
+    }, opt.style || opt.getStyle && opt.getStyle(store, opt) || {});
 
+    backupAttr(el, 'style');
+
     for (var key in style) {
@@ -167,4 +492,4 @@ el.style[key] = style[key];
 
-    hp.backupAttr(el, 'class');
-    hp.addClass(el, opt.draggingClass);
+    backupAttr(el, 'class');
+    addClass(el, opt.draggingClass);
   }
@@ -203,3 +528,3 @@
     if (canMove && opt.moving) {
-      if (opt.moving(e, opt, store) === false) {
+      if (opt.moving(e, store, opt) === false) {
         canMove = false;
@@ -223,3 +548,3 @@ }
   function drop(e) {
-    DragEventService.off(document, 'move', moving, {
+    index.off(document, 'move', moving, {
       touchArgs: [{
@@ -229,6 +554,7 @@ passive: false
     });
-    DragEventService.off(window, 'end', drop); // drag executed if movedCount > 0
+    index.off(window, 'end', drop); // drag executed if movedCount > 0
 
     if (store.movedCount > 0) {
       store.movedCount = 0;
+      store.endEvent = e;
       var _store = store,
@@ -240,7 +566,7 @@ el = _store.el;
       } else {
-        hp.restoreAttr(el, 'style');
-        hp.restoreAttr(el, 'class');
+        restoreAttr(el, 'style');
+        restoreAttr(el, 'class');
       }
 
-      opt.drop && opt.drop(e, opt, store);
+      opt.drop && opt.drop(e, store, opt);
     }
@@ -252,3 +578,3 @@
   function resolveDragedElAndInitialPosition() {
-    var el0 = opt.getEl ? opt.getEl(dragHandlerEl, opt, store) : dragHandlerEl;
+    var el0 = opt.getEl ? opt.getEl(dragHandlerEl, store, opt) : dragHandlerEl;
     var el = el0;
@@ -263,3 +589,3 @@ store.originalEl = el0;
     return {
-      position: hp.getPosition(el0),
+      position: getPosition(el0),
       el: el
@@ -276,2 +602,2 @@ };
 
-module.exports = index;
+exports.default = index$1;

dist/draggable-helper.esm.js

 /*!
- * draggable-helper v2.0.0
- * (c) phphe <[e-mail]> (https://github.com/phphe)
+* draggable-helper v3.0.0
+* (c) phphe <[e-mail]> (https://github.com/phphe)
+* Released under the MIT License.
+*/
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+/*!
+* helper-js v1.4.13
+* (c) phphe <[e-mail]> (https://github.com/phphe)
+* Released under the MIT License.
+*/
+
+function getOffsetParent(el) {
+  var offsetParent = el.offsetParent;
+
+  if (!offsetParent || offsetParent === document.body && getComputedStyle(document.body).position === 'static') {
+    offsetParent = document.body.parentElement;
+  }
+
+  return offsetParent;
+} // get el current position. like jQuery.position
+// the position is relative to offsetParent viewport left top. it is for set absolute position, absolute position is relative to offsetParent viewport left top.
+// 相对于offsetParent可视区域左上角(el.offsetLeft或top包含父元素的滚动距离, 所以要减去). position一般用于设置绝对定位的情况, 而绝对定位就是以可视区域左上角为原点.
+
+function getPosition(el) {
+  var offsetParent = getOffsetParent(el);
+  var ps = {
+    x: el.offsetLeft,
+    y: el.offsetTop
+  };
+  var parent = el;
+
+  while (true) {
+    parent = parent.parentElement;
+
+    if (parent === offsetParent || !parent) {
+      break;
+    }
+
+    ps.x -= parent.scrollLeft;
+    ps.y -= parent.scrollTop;
+  }
+
+  return ps;
+} // get position of a el if its offset is given. like jQuery.offset.
+function getBoundingClientRect(el) {
+  // refer: http://www.51xuediannao.com/javascript/getBoundingClientRect.html
+  var xy = el.getBoundingClientRect();
+  var top = xy.top - document.documentElement.clientTop,
+      //document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0
+  bottom = xy.bottom,
+      left = xy.left - document.documentElement.clientLeft,
+      //document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0
+  right = xy.right,
+      width = xy.width || right - left,
+      //IE67不存在width 使用right - left获得
+  height = xy.height || bottom - top;
+  var x = left;
+  var y = top;
+  return {
+    top: top,
+    right: right,
+    bottom: bottom,
+    left: left,
+    width: width,
+    height: height,
+    x: x,
+    y: y
+  };
+}
+function findParent(el, callback, opt) {
+  var cur = opt && opt.withSelf ? el : el.parentElement;
+
+  while (cur) {
+    var r = callback(cur);
+
+    if (r === 'break') {
+      return;
+    } else if (r) {
+      return cur;
+    } else {
+      cur = cur.parentElement;
+    }
+  }
+}
+function backupAttr(el, name) {
+  var key = "original_".concat(name);
+  el[key] = el.getAttribute(name);
+}
+function restoreAttr(el, name) {
+  var key = "original_".concat(name);
+  el.setAttribute(name, el[key]);
+} // source: http://youmightnotneedjquery.com/
+
+function hasClass(el, className) {
+  if (el.classList) {
+    return el.classList.contains(className);
+  } else {
+    return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
+  }
+} // source: http://youmightnotneedjquery.com/
+
+function addClass(el, className) {
+  if (!hasClass(el, className)) {
+    if (el.classList) {
+      el.classList.add(className);
+    } else {
+      el.className += ' ' + className;
+    }
+  }
+} // source: http://youmightnotneedjquery.com/
+
+/*!
+ * helper-js v1.3.9
+ * (c) 2018-present phphe <[e-mail]> (https://github.com/phphe)
  * Released under the MIT License.
  */
-import { hasClass, findParent, restoreAttr, getPosition, getElSize, backupAttr, addClass } from 'helper-js';
-import DragEventService from 'drag-event-service';
 
+function onDOM(el, name, handler) {
+  for (var _len5 = arguments.length, args = new Array(_len5 > 3 ? _len5 - 3 : 0), _key6 = 3; _key6 < _len5; _key6++) {
+    args[_key6 - 3] = arguments[_key6];
+  }
+
+  if (el.addEventListener) {
+    // 所有主流浏览器，除了 IE 8 及更早 IE版本
+    el.addEventListener.apply(el, [name, handler].concat(args));
+  } else if (el.attachEvent) {
+    // IE 8 及更早 IE 版本
+    el.attachEvent.apply(el, ["on".concat(name), handler].concat(args));
+  }
+}
+function offDOM(el, name, handler) {
+  for (var _len6 = arguments.length, args = new Array(_len6 > 3 ? _len6 - 3 : 0), _key7 = 3; _key7 < _len6; _key7++) {
+    args[_key7 - 3] = arguments[_key7];
+  }
+
+  if (el.removeEventListener) {
+    // 所有主流浏览器，除了 IE 8 及更早 IE版本
+    el.removeEventListener.apply(el, [name, handler].concat(args));
+  } else if (el.detachEvent) {
+    // IE 8 及更早 IE 版本
+    el.detachEvent.apply(el, ["on".concat(name), handler].concat(args));
+  }
+}
+
+/*!
+ * drag-event-service v1.0.0
+ * (c) 2018-present phphe <[e-mail]> (https://github.com/phphe)
+ * Released under the MIT License.
+ */
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
+var events = {
+  start: ['mousedown', 'touchstart'],
+  move: ['mousemove', 'touchmove'],
+  end: ['mouseup', 'touchend']
+};
+var index = {
+  isTouch: function isTouch(e) {
+    return e.type && e.type.startsWith('touch');
+  },
+  _getStore: function _getStore(el) {
+    if (!el._wrapperStore) {
+      el._wrapperStore = [];
+    }
+
+    return el._wrapperStore;
+  },
+  on: function on(el, name, handler, options) {
+    var _hp$onDOM, _hp$onDOM2;
+
+    var _resolveOptions = resolveOptions(options),
+        args = _resolveOptions.args,
+        mouseArgs = _resolveOptions.mouseArgs,
+        touchArgs = _resolveOptions.touchArgs;
+
+    var store = this._getStore(el);
+
+    var ts = this;
+
+    var wrapper = function wrapper(e) {
+      var mouse;
+      var isTouch = ts.isTouch(e);
+
+      if (isTouch) {
+        // touch
+        mouse = {
+          x: e.changedTouches[0].pageX,
+          y: e.changedTouches[0].pageY
+        };
+      } else {
+        // mouse
+        mouse = {
+          x: e.pageX,
+          y: e.pageY
+        };
+
+        if (name === 'start' && e.which !== 1) {
+          // not left button mousedown
+          return;
+        }
+      }
+
+      return handler.call(this, e, mouse);
+    };
+
+    store.push({
+      handler: handler,
+      wrapper: wrapper
+    }); // follow format will cause big bundle size
+    // 以下写法将会使打包工具认为hp是上下文, 导致打包整个hp
+    // hp.onDOM(el, events[name][0], wrapper, ...args)
+
+    (_hp$onDOM = onDOM).call.apply(_hp$onDOM, [null, el, events[name][0], wrapper].concat(_toConsumableArray(args).concat(_toConsumableArray(mouseArgs))));
+
+    (_hp$onDOM2 = onDOM).call.apply(_hp$onDOM2, [null, el, events[name][1], wrapper].concat(_toConsumableArray(args).concat(_toConsumableArray(touchArgs))));
+  },
+  off: function off(el, name, handler, options) {
+    var _resolveOptions2 = resolveOptions(options),
+        args = _resolveOptions2.args,
+        mouseArgs = _resolveOptions2.mouseArgs;
+
+    var store = this._getStore(el);
+
+    for (var i = store.length - 1; i >= 0; i--) {
+      var _store$i = store[i],
+          handler2 = _store$i.handler,
+          wrapper = _store$i.wrapper;
+
+      if (handler === handler2) {
+        var _hp$offDOM, _hp$offDOM2;
+
+        (_hp$offDOM = offDOM).call.apply(_hp$offDOM, [null, el, events[name][0], wrapper].concat(_toConsumableArray(args).concat(_toConsumableArray(mouseArgs))));
+
+        (_hp$offDOM2 = offDOM).call.apply(_hp$offDOM2, [null, el, events[name][1], wrapper].concat(_toConsumableArray(args).concat(_toConsumableArray(mouseArgs))));
+
+        store.splice(i, 1);
+      }
+    }
+  }
+};
+
+function resolveOptions(options) {
+  if (!options) {
+    options = {};
+  }
+
+  var args = options.args || [];
+  var mouseArgs = options.mouseArgs || [];
+  var touchArgs = options.touchArgs || [];
+  return {
+    args: args,
+    mouseArgs: mouseArgs,
+    touchArgs: touchArgs
+  };
+}
+
 /***
 const destroy = draggableHelper(HTMLElement dragHandlerEl, Object opt = {})
-opt.drag(startEvent, moveEvent, opt, store) return false to prevent drag
-[Object] opt.style || opt.getStyle(opt, store) set style of moving el style
+opt.beforeDrag(startEvent, moveEvent, store, opt) return false to prevent drag
+opt.drag(startEvent, moveEvent, store, opt) return false to prevent drag
+[Object] opt.style || opt.getStyle(store, opt) set style of moving el style
 [Boolean] opt.clone
 opt.draggingClass, default dragging
-opt.moving(e, opt, store) return false can prevent moving
-opt.drop(e, opt, store)
-opt.getEl(dragHandlerEl, opt, store) get the el that will be moved. default is dragHandlerEl
-afterGetEl(opt, store)
+opt.moving(e, store, opt) return false can prevent moving
+opt.drop(e, store, opt)
+opt.getEl(dragHandlerEl, store, opt) get the el that will be moved. default is dragHandlerEl
 opt.minTranslate default 10, unit px
@@ -31,2 +347,4 @@ [Boolean] opt.triggerBySelf: false if trigger only by self, can not be triggered by children
   movedCount // start from 0
+  startEvent
+  endEvent
 }
@@ -37,10 +355,10 @@ e.g.
   data: this.data,
-  drag: (e, opt, store) => {
+  drag: (e, store, opt) => {
     dplh.style.height = store.el.querySelector('.TreeNodeSelf').offsetHeight + 'px'
     th.insertAfter(dplh, opt.data)
   },
-  moving: (e, opt, store) => {
+  moving: (e, store, opt) => {
     hp.arrayRemove(dplh.parent.children, dplh)
   },
-  drop: (e, opt, store) => {
+  drop: (e, store, opt) => {
     hp.arrayRemove(dplh.parent.children, dplh)
@@ -53,5 +371,5 @@ },
 var UNDRAGGABLE_CLASS = 'undraggable';
-function index (dragHandlerEl) {
+function index$1 (dragHandlerEl) {
   var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  opt = Object.assign({
+  opt = _objectSpread2({
     minTranslate: 10,
@@ -63,3 +381,3 @@ draggingClass: 'dragging'
   var destroy = function destroy() {
-    DragEventService.off(dragHandlerEl, 'start', dragHandlerEl._draggbleEventHandler);
+    index.off(dragHandlerEl, 'start', dragHandlerEl._draggbleEventHandler);
     delete dragHandlerEl._draggbleEventHandler;
@@ -73,3 +391,3 @@ };
   dragHandlerEl._draggbleEventHandler = start;
-  DragEventService.on(dragHandlerEl, 'start', start);
+  index.on(dragHandlerEl, 'start', start);
   return destroy;
@@ -112,3 +430,3 @@
     store.startEvent = e;
-    store.initialMouse = Object.assign({}, store.mouse);
+    store.initialMouse = _objectSpread2({}, store.mouse);
     /*
@@ -119,3 +437,3 @@ must set passive false for touch, else the follow error occurs in Chrome:
 
-    DragEventService.on(document, 'move', moving, {
+    index.on(document, 'move', moving, {
       touchArgs: [{
@@ -125,9 +443,9 @@ passive: false
     });
-    DragEventService.on(window, 'end', drop);
+    index.on(window, 'end', drop);
   }
 
   function drag(e) {
-    var r = opt.drag && opt.drag(store.startEvent, e, opt, store);
+    var canDrag = opt.beforeDrag && opt.beforeDrag(store.startEvent, e, store, opt);
 
-    if (r === false) {
+    if (canDrag === false) {
       return false;
@@ -141,15 +459,22 @@ }
     store.el = el;
-    store.initialPosition = Object.assign({}, position);
-    opt.afterGetEl && opt.afterGetEl(opt, store); // dom actions
+    store.initialPosition = _objectSpread2({}, position);
+    canDrag = opt.drag && opt.drag(store.startEvent, e, store, opt);
 
-    var size = getElSize(el);
-    var style = Object.assign({
-      width: "".concat(size.width, "px"),
-      height: "".concat(size.height, "px"),
+    if (canDrag === false) {
+      return false;
+    } // dom actions
+
+
+    var size = getBoundingClientRect(el);
+
+    var style = _objectSpread2({
+      width: "".concat(Math.ceil(size.width), "px"),
+      height: "".concat(Math.ceil(size.height), "px"),
       zIndex: 9999,
-      opacity: 0.6,
+      opacity: 0.8,
       position: 'absolute',
       left: position.x + 'px',
       top: position.y + 'px'
-    }, opt.style || opt.getStyle && opt.getStyle(opt, store) || {});
+    }, opt.style || opt.getStyle && opt.getStyle(store, opt) || {});
+
     backupAttr(el, 'style');
@@ -197,3 +522,3 @@
     if (canMove && opt.moving) {
-      if (opt.moving(e, opt, store) === false) {
+      if (opt.moving(e, store, opt) === false) {
         canMove = false;
@@ -217,3 +542,3 @@ }
   function drop(e) {
-    DragEventService.off(document, 'move', moving, {
+    index.off(document, 'move', moving, {
       touchArgs: [{
@@ -223,6 +548,7 @@ passive: false
     });
-    DragEventService.off(window, 'end', drop); // drag executed if movedCount > 0
+    index.off(window, 'end', drop); // drag executed if movedCount > 0
 
     if (store.movedCount > 0) {
       store.movedCount = 0;
+      store.endEvent = e;
       var _store = store,
@@ -238,3 +564,3 @@ el = _store.el;
 
-      opt.drop && opt.drop(e, opt, store);
+      opt.drop && opt.drop(e, store, opt);
     }
@@ -246,3 +572,3 @@
   function resolveDragedElAndInitialPosition() {
-    var el0 = opt.getEl ? opt.getEl(dragHandlerEl, opt, store) : dragHandlerEl;
+    var el0 = opt.getEl ? opt.getEl(dragHandlerEl, store, opt) : dragHandlerEl;
     var el = el0;
@@ -269,2 +595,2 @@ store.originalEl = el0;
 
-export default index;
+export default index$1;

dist/draggable-helper.js

 /*!
- * draggable-helper v2.0.0
- * (c) phphe <[e-mail]> (https://github.com/phphe)
- * Released under the MIT License.
- */
+* draggable-helper v3.0.0
+* (c) phphe <[e-mail]> (https://github.com/phphe)
+* Released under the MIT License.
+*/
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global['helper-js'] = factory());
-}(this, function () { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = global || self, factory(global.draggableHelper = {}));
+}(this, (function (exports) { 'use strict';
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      if (enumerableOnly) symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+      keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+
+    return target;
+  }
+
   /*!
-   * helper-js v1.4.2
-   * (c) phphe <[e-mail]> (https://github.com/phphe)
-   * Released under the MIT License.
-   */
+  * helper-js v1.4.13
+  * (c) phphe <[e-mail]> (https://github.com/phphe)
+  * Released under the MIT License.
+  */
 
@@ -51,2 +100,27 @@ function getOffsetParent(el) {
   } // get position of a el if its offset is given. like jQuery.offset.
+  function getBoundingClientRect(el) {
+    // refer: http://www.51xuediannao.com/javascript/getBoundingClientRect.html
+    var xy = el.getBoundingClientRect();
+    var top = xy.top - document.documentElement.clientTop,
+        //document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0
+    bottom = xy.bottom,
+        left = xy.left - document.documentElement.clientLeft,
+        //document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0
+    right = xy.right,
+        width = xy.width || right - left,
+        //IE67不存在width 使用right - left获得
+    height = xy.height || bottom - top;
+    var x = left;
+    var y = top;
+    return {
+      top: top,
+      right: right,
+      bottom: bottom,
+      left: left,
+      width: width,
+      height: height,
+      x: x,
+      y: y
+    };
+  }
   function findParent(el, callback, opt) {
@@ -93,12 +167,2 @@ var cur = opt && opt.withSelf ? el : el.parentElement;
   } // source: http://youmightnotneedjquery.com/
-  function getElSize(el) {
-    var originDisplay = el.style.display;
-    el.style.display = 'block';
-    var size = {
-      width: el.offsetWidth,
-      height: el.offsetHeight
-    };
-    el.style.display = originDisplay;
-    return size;
-  }
 
@@ -271,10 +335,10 @@ /*!
   const destroy = draggableHelper(HTMLElement dragHandlerEl, Object opt = {})
-  opt.drag(startEvent, moveEvent, opt, store) return false to prevent drag
-  [Object] opt.style || opt.getStyle(opt, store) set style of moving el style
+  opt.beforeDrag(startEvent, moveEvent, store, opt) return false to prevent drag
+  opt.drag(startEvent, moveEvent, store, opt) return false to prevent drag
+  [Object] opt.style || opt.getStyle(store, opt) set style of moving el style
   [Boolean] opt.clone
   opt.draggingClass, default dragging
-  opt.moving(e, opt, store) return false can prevent moving
-  opt.drop(e, opt, store)
-  opt.getEl(dragHandlerEl, opt, store) get the el that will be moved. default is dragHandlerEl
-  afterGetEl(opt, store)
+  opt.moving(e, store, opt) return false can prevent moving
+  opt.drop(e, store, opt)
+  opt.getEl(dragHandlerEl, store, opt) get the el that will be moved. default is dragHandlerEl
   opt.minTranslate default 10, unit px
@@ -292,2 +356,4 @@ [Boolean] opt.triggerBySelf: false if trigger only by self, can not be triggered by children
     movedCount // start from 0
+    startEvent
+    endEvent
   }
@@ -298,10 +364,10 @@ e.g.
     data: this.data,
-    drag: (e, opt, store) => {
+    drag: (e, store, opt) => {
       dplh.style.height = store.el.querySelector('.TreeNodeSelf').offsetHeight + 'px'
       th.insertAfter(dplh, opt.data)
     },
-    moving: (e, opt, store) => {
+    moving: (e, store, opt) => {
       hp.arrayRemove(dplh.parent.children, dplh)
     },
-    drop: (e, opt, store) => {
+    drop: (e, store, opt) => {
       hp.arrayRemove(dplh.parent.children, dplh)
@@ -316,3 +382,3 @@ },
     var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    opt = Object.assign({
+    opt = _objectSpread2({
       minTranslate: 10,
@@ -371,3 +437,3 @@ draggingClass: 'dragging'
       store.startEvent = e;
-      store.initialMouse = Object.assign({}, store.mouse);
+      store.initialMouse = _objectSpread2({}, store.mouse);
       /*
@@ -387,5 +453,5 @@ must set passive false for touch, else the follow error occurs in Chrome:
     function drag(e) {
-      var r = opt.drag && opt.drag(store.startEvent, e, opt, store);
+      var canDrag = opt.beforeDrag && opt.beforeDrag(store.startEvent, e, store, opt);
 
-      if (r === false) {
+      if (canDrag === false) {
         return false;
@@ -399,15 +465,22 @@ }
       store.el = el;
-      store.initialPosition = Object.assign({}, position);
-      opt.afterGetEl && opt.afterGetEl(opt, store); // dom actions
+      store.initialPosition = _objectSpread2({}, position);
+      canDrag = opt.drag && opt.drag(store.startEvent, e, store, opt);
 
-      var size = getElSize(el);
-      var style = Object.assign({
-        width: "".concat(size.width, "px"),
-        height: "".concat(size.height, "px"),
+      if (canDrag === false) {
+        return false;
+      } // dom actions
+
+
+      var size = getBoundingClientRect(el);
+
+      var style = _objectSpread2({
+        width: "".concat(Math.ceil(size.width), "px"),
+        height: "".concat(Math.ceil(size.height), "px"),
         zIndex: 9999,
-        opacity: 0.6,
+        opacity: 0.8,
         position: 'absolute',
         left: position.x + 'px',
         top: position.y + 'px'
-      }, opt.style || opt.getStyle && opt.getStyle(opt, store) || {});
+      }, opt.style || opt.getStyle && opt.getStyle(store, opt) || {});
+
       backupAttr(el, 'style');
@@ -455,3 +528,3 @@
       if (canMove && opt.moving) {
-        if (opt.moving(e, opt, store) === false) {
+        if (opt.moving(e, store, opt) === false) {
           canMove = false;
@@ -484,2 +557,3 @@ }
         store.movedCount = 0;
+        store.endEvent = e;
         var _store = store,
@@ -495,3 +569,3 @@ el = _store.el;
 
-        opt.drop && opt.drop(e, opt, store);
+        opt.drop && opt.drop(e, store, opt);
       }
@@ -503,3 +577,3 @@
     function resolveDragedElAndInitialPosition() {
-      var el0 = opt.getEl ? opt.getEl(dragHandlerEl, opt, store) : dragHandlerEl;
+      var el0 = opt.getEl ? opt.getEl(dragHandlerEl, store, opt) : dragHandlerEl;
       var el = el0;
@@ -526,4 +600,6 @@ store.originalEl = el0;
 
-  return index$1;
+  exports.default = index$1;
 
-}));
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

dist/draggable-helper.min.js

 /*!
- * draggable-helper v2.0.0
- * (c) phphe <[e-mail]> (https://github.com/phphe)
- * Released under the MIT License.
- */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self)["helper-js"]=e()}(this,function(){"use strict";function t(t){for(var e=function(t){var e=t.offsetParent;return(!e||e===document.body&&"static"===getComputedStyle(document.body).position)&&(e=document.body.parentElement),e}(t),n={x:t.offsetLeft,y:t.offsetTop},o=t;(o=o.parentElement)!==e&&o;)n.x-=o.scrollLeft,n.y-=o.scrollTop;return n}function e(t,e){t["original_".concat(e)]=t.getAttribute(e)}function n(t,e){var n="original_".concat(e);t.setAttribute(e,t[n])}function o(t,e){return t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className)}function r(t,e,n){for(var o=arguments.length,r=new Array(o>3?o-3:0),a=3;a<o;a++)r[a-3]=arguments[a];t.addEventListener?t.addEventListener.apply(t,[e,n].concat(r)):t.attachEvent&&t.attachEvent.apply(t,["on".concat(e),n].concat(r))}function a(t,e,n){for(var o=arguments.length,r=new Array(o>3?o-3:0),a=3;a<o;a++)r[a-3]=arguments[a];t.removeEventListener?t.removeEventListener.apply(t,[e,n].concat(r)):t.detachEvent&&t.detachEvent.apply(t,["on".concat(e),n].concat(r))}function i(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(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 s={start:["mousedown","touchstart"],move:["mousemove","touchmove"],end:["mouseup","touchend"]},c={isTouch:function(t){return t.type&&t.type.startsWith("touch")},_getStore:function(t){return t._wrapperStore||(t._wrapperStore=[]),t._wrapperStore},on:function(t,e,n,o){var a,c,u=l(o),f=u.args,p=u.mouseArgs,g=u.touchArgs,d=this._getStore(t),v=this,m=function(t){var o;if(v.isTouch(t))o={x:t.changedTouches[0].pageX,y:t.changedTouches[0].pageY};else if(o={x:t.pageX,y:t.pageY},"start"===e&&1!==t.which)return;return n.call(this,t,o)};d.push({handler:n,wrapper:m}),(a=r).call.apply(a,[null,t,s[e][0],m].concat(i(f).concat(i(p)))),(c=r).call.apply(c,[null,t,s[e][1],m].concat(i(f).concat(i(g))))},off:function(t,e,n,o){for(var r=l(o),c=r.args,u=r.mouseArgs,f=this._getStore(t),p=f.length-1;p>=0;p--){var g,d,v=f[p],m=v.handler,y=v.wrapper;if(n===m)(g=a).call.apply(g,[null,t,s[e][0],y].concat(i(c).concat(i(u)))),(d=a).call.apply(d,[null,t,s[e][1],y].concat(i(c).concat(i(u)))),f.splice(p,1)}}};function l(t){return t||(t={}),{args:t.args||[],mouseArgs:t.mouseArgs||[],touchArgs:t.touchArgs||[]}}var u=["INPUT","TEXTAREA","SELECT","OPTGROUP","OPTION"],f="undraggable";return function(r){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};a=Object.assign({minTranslate:10,draggingClass:"dragging"},a);var i={movedCount:0},s=function(){c.off(r,"start",r._draggbleEventHandler),delete r._draggbleEventHandler};return r._draggbleEventHandler&&s(),r._draggbleEventHandler=l,c.on(r,"start",l),s;function l(t,e){a.triggerBySelf&&t.target!==r||u.includes(t.target.tagName)||o(t.target,f)||function(t,e,n){for(var o=n&&n.withSelf?t:t.parentElement;o;){var r=e(o);if("break"===r)return;if(r)return o;o=o.parentElement}}(t.target,function(t){return!!o(t,f)||(t===r?"break":void 0)})||(t.preventDefault(),i.mouse={x:e.x,y:e.y},i.startEvent=t,i.initialMouse=Object.assign({},i.mouse),c.on(document,"move",g,{touchArgs:[{passive:!1}]}),c.on(window,"end",d))}function p(n){if(!1===(a.drag&&a.drag(i.startEvent,n,a,i)))return!1;var s=function(){var e=a.getEl?a.getEl(r,a,i):r,n=e;return i.originalEl=e,a.clone&&(n=e.cloneNode(!0),e.parentElement.appendChild(n)),{position:t(e),el:n}}(),c=s.el,l=s.position;i.el=c,i.initialPosition=Object.assign({},l),a.afterGetEl&&a.afterGetEl(a,i);var u=function(t){var e=t.style.display;t.style.display="block";var n={width:t.offsetWidth,height:t.offsetHeight};return t.style.display=e,n}(c),f=Object.assign({width:"".concat(u.width,"px"),height:"".concat(u.height,"px"),zIndex:9999,opacity:.6,position:"absolute",left:l.x+"px",top:l.y+"px"},a.style||a.getStyle&&a.getStyle(a,i)||{});for(var p in e(c,"style"),f)c.style[p]=f[p];e(c,"class"),function(t,e){o(t,e)||(t.classList?t.classList.add(e):t.className+=" "+e)}(c,a.draggingClass)}function g(t,e){t.preventDefault(),i.mouse={x:e.x,y:e.y};var n=i.move={x:i.mouse.x-i.initialMouse.x,y:i.mouse.y-i.initialMouse.y};if(0===i.movedCount&&a.minTranslate){var o=Math.pow(i.move.x,2),r=Math.pow(i.move.y,2);if(Math.pow(o+r,.5)<a.minTranslate)return}var s=!0;if(0===i.movedCount&&!1===p(t)&&(s=!1),s&&a.moving&&!1===a.moving(t,a,i)&&(s=!1),s){if(!i||!i.el)return;Object.assign(i.el.style,{left:i.initialPosition.x+n.x+"px",top:i.initialPosition.y+n.y+"px"}),i.movedCount++}}function d(t){if(c.off(document,"move",g,{touchArgs:[{passive:!1}]}),c.off(window,"end",d),i.movedCount>0){i.movedCount=0;var e=i.el;a.clone?e.parentElement.removeChild(e):(n(e,"style"),n(e,"class")),a.drop&&a.drop(t,a,i)}i={movedCount:0}}}});
+* draggable-helper v3.0.0
+* (c) phphe <[e-mail]> (https://github.com/phphe)
+* Released under the MIT License.
+*/
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).draggableHelper={})}(this,(function(t){"use strict";function e(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function r(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?n(Object(o),!0).forEach((function(n){e(t,n,o[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}
+/*!
+  * helper-js v1.4.13
+  * (c) phphe <[e-mail]> (https://github.com/phphe)
+  * Released under the MIT License.
+  */function o(t){for(var e=function(t){var e=t.offsetParent;return(!e||e===document.body&&"static"===getComputedStyle(document.body).position)&&(e=document.body.parentElement),e}(t),n={x:t.offsetLeft,y:t.offsetTop},r=t;(r=r.parentElement)!==e&&r;)n.x-=r.scrollLeft,n.y-=r.scrollTop;return n}function a(t,e){t["original_".concat(e)]=t.getAttribute(e)}function i(t,e){var n="original_".concat(e);t.setAttribute(e,t[n])}function c(t,e){return t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className)}
+/*!
+   * helper-js v1.3.9
+   * (c) 2018-present phphe <[e-mail]> (https://github.com/phphe)
+   * Released under the MIT License.
+   */
+function l(t,e,n){for(var r=arguments.length,o=new Array(r>3?r-3:0),a=3;a<r;a++)o[a-3]=arguments[a];t.addEventListener?t.addEventListener.apply(t,[e,n].concat(o)):t.attachEvent&&t.attachEvent.apply(t,["on".concat(e),n].concat(o))}function u(t,e,n){for(var r=arguments.length,o=new Array(r>3?r-3:0),a=3;a<r;a++)o[a-3]=arguments[a];t.removeEventListener?t.removeEventListener.apply(t,[e,n].concat(o)):t.detachEvent&&t.detachEvent.apply(t,["on".concat(e),n].concat(o))}
+/*!
+   * drag-event-service v1.0.0
+   * (c) 2018-present phphe <[e-mail]> (https://github.com/phphe)
+   * Released under the MIT License.
+   */function s(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(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 f={start:["mousedown","touchstart"],move:["mousemove","touchmove"],end:["mouseup","touchend"]},p={isTouch:function(t){return t.type&&t.type.startsWith("touch")},_getStore:function(t){return t._wrapperStore||(t._wrapperStore=[]),t._wrapperStore},on:function(t,e,n,r){var o,a,i=g(r),c=i.args,u=i.mouseArgs,p=i.touchArgs,d=this._getStore(t),v=this,m=function(t){var r;if(v.isTouch(t))r={x:t.changedTouches[0].pageX,y:t.changedTouches[0].pageY};else if(r={x:t.pageX,y:t.pageY},"start"===e&&1!==t.which)return;return n.call(this,t,r)};d.push({handler:n,wrapper:m}),(o=l).call.apply(o,[null,t,f[e][0],m].concat(s(c).concat(s(u)))),(a=l).call.apply(a,[null,t,f[e][1],m].concat(s(c).concat(s(p))))},off:function(t,e,n,r){for(var o=g(r),a=o.args,i=o.mouseArgs,c=this._getStore(t),l=c.length-1;l>=0;l--){var p,d,v=c[l],m=v.handler,y=v.wrapper;if(n===m)(p=u).call.apply(p,[null,t,f[e][0],y].concat(s(a).concat(s(i)))),(d=u).call.apply(d,[null,t,f[e][1],y].concat(s(a).concat(s(i)))),c.splice(l,1)}}};function g(t){return t||(t={}),{args:t.args||[],mouseArgs:t.mouseArgs||[],touchArgs:t.touchArgs||[]}}var d=["INPUT","TEXTAREA","SELECT","OPTGROUP","OPTION"],v="undraggable";t.default=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e=r({minTranslate:10,draggingClass:"dragging"},e);var n={movedCount:0},l=function(){p.off(t,"start",t._draggbleEventHandler),delete t._draggbleEventHandler};return t._draggbleEventHandler&&l(),t._draggbleEventHandler=u,p.on(t,"start",u),l;function u(o,a){e.triggerBySelf&&o.target!==t||(d.includes(o.target.tagName)||c(o.target,v)||function(t,e,n){for(var r=n&&n.withSelf?t:t.parentElement;r;){var o=e(r);if("break"===o)return;if(o)return r;r=r.parentElement}}(o.target,(function(e){return!!c(e,v)||(e===t?"break":void 0)}))||(o.preventDefault(),n.mouse={x:a.x,y:a.y},n.startEvent=o,n.initialMouse=r({},n.mouse),p.on(document,"move",f,{touchArgs:[{passive:!1}]}),p.on(window,"end",g)))}function s(i){var l=e.beforeDrag&&e.beforeDrag(n.startEvent,i,n,e);if(!1===l)return!1;var u=function(){var r=e.getEl?e.getEl(t,n,e):t,a=r;n.originalEl=r,e.clone&&(a=r.cloneNode(!0),r.parentElement.appendChild(a));return{position:o(r),el:a}}(),s=u.el,f=u.position;if(n.el=s,n.initialPosition=r({},f),!1===(l=e.drag&&e.drag(n.startEvent,i,n,e)))return!1;var p=function(t){var e=t.getBoundingClientRect(),n=e.top-document.documentElement.clientTop,r=e.bottom,o=e.left-document.documentElement.clientLeft,a=e.right;return{top:n,right:a,bottom:r,left:o,width:e.width||a-o,height:e.height||r-n,x:o,y:n}}(s),g=r({width:"".concat(Math.ceil(p.width),"px"),height:"".concat(Math.ceil(p.height),"px"),zIndex:9999,opacity:.8,position:"absolute",left:f.x+"px",top:f.y+"px"},e.style||e.getStyle&&e.getStyle(n,e)||{});for(var d in a(s,"style"),g)s.style[d]=g[d];a(s,"class"),function(t,e){c(t,e)||(t.classList?t.classList.add(e):t.className+=" "+e)}(s,e.draggingClass)}function f(t,r){t.preventDefault(),n.mouse={x:r.x,y:r.y};var o=n.move={x:n.mouse.x-n.initialMouse.x,y:n.mouse.y-n.initialMouse.y};if(0===n.movedCount&&e.minTranslate){var a=Math.pow(n.move.x,2),i=Math.pow(n.move.y,2);if(Math.pow(a+i,.5)<e.minTranslate)return}var c=!0;if(0===n.movedCount&&!1===s(t)&&(c=!1),c&&e.moving&&!1===e.moving(t,n,e)&&(c=!1),c){if(!n||!n.el)return;Object.assign(n.el.style,{left:n.initialPosition.x+o.x+"px",top:n.initialPosition.y+o.y+"px"}),n.movedCount++}}function g(t){if(p.off(document,"move",f,{touchArgs:[{passive:!1}]}),p.off(window,"end",g),n.movedCount>0){n.movedCount=0,n.endEvent=t;var r=n.el;e.clone?r.parentElement.removeChild(r):(i(r,"style"),i(r,"class")),e.drop&&e.drop(t,n,e)}n={movedCount:0}}},Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=draggable-helper.min.js.map

package.json

 {
   "name": "draggable-helper",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "",
   "main": "dist/draggable-helper.cjs.js",
   "module": "dist/draggable-helper.esm.js",
-  "unpkg": "dist/draggable-helper.js",
   "files": [
@@ -12,6 +11,7 @@ "dist"
   "scripts": {
-    "build": "bili --format cjs --format umd  --format umd-min --format esm --banner",
-    "dev": "bili --watch"
+    "build": "node build/build.js",
+    "dev": "node build/build.js --watch"
   },
   "author": "phphe <[e-mail]> (https://github.com/phphe)",
+  "unpkg": "dist/draggable-helper.js",
   "bugs": {
@@ -25,15 +25,21 @@ "url": "https://github.com/phphe/draggable-helper/issues"
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-decorators": "^7.4.4",
-    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
-    "@babel/plugin-proposal-function-sent": "^7.5.0",
-    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
-    "bili": "^4.8.1"
+    "@babel/core": "^7.7.7",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+    "@babel/plugin-proposal-json-strings": "^7.7.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+    "@babel/plugin-syntax-import-meta": "^7.7.4",
+    "@babel/preset-env": "^7.7.7",
+    "@rollup/plugin-json": "^4.0.1",
+    "@rollup/plugin-node-resolve": "^6.0.0",
+    "commander": "^4.0.1",
+    "rollup": "^1.27.14",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-terser": "^5.1.3"
   },
   "dependencies": {
-    "drag-event-service": "^1.0.0",
-    "helper-js": "^1.4.2"
+    "helper-js": "^1.4.13",
+    "drag-event-service": "^1.0.0"
   },
   "license": "MIT"
 }

README.MD

@@ -30,11 +30,17 @@ # draggable-helper
   // [Object] style, set the style of dragging element
-  // getStyle(opt, store), set the style of dragging element
+  // getStyle(store, opt), set the style of dragging element
   // [String] draggingClass, default dragging, set the class of dragging element
   // [Boolean] clone, move the element or move a cloned one
   // minTranslate default 10, unit px
-  // getEl(dragHandlerEl, opt, store), optional, get the el that will be moved. default is dragHandlerEl
-  // afterGetEl(opt, store)
+  // getEl(dragHandlerEl, store, opt), optional, get the el that will be moved. default is dragHandlerEl
+  // afterGetEl(store, opt)
   // [Boolean] triggerBySelf if trigger only by dragHandlerEl self, can not be triggered by children
+  // hook, before drag start
+  beforeDrag(startEvent, moveEvent, store, opt){
+    // when trigger drag, the position must be moved, so there are two event. startEvent also can be accessed by store.startEvent
+    // The dragged element at this time has not yet been obtained, store.el is null. 此时要移动的元素还没有获得到, 即store.el是空.
+    // return false to prevent drag
+  },
   // hook, when drag start
-  drag(startEvent, moveEvent, opt, store){
+  drag(startEvent, moveEvent, store, opt){
     // when trigger drag, the position must be moved, so there are two event. startEvent also can be accessed by store.startEvent
@@ -44,7 +50,7 @@ // return false to prevent drag
   // hook, when mouse moving
-  moving: (moveEvent, opt, store) => {
+  moving: (moveEvent, store, opt) => {
     // return false to prevent moving
   },
   // hook, when drop
-  drop: (endEvent, opt, store) => {
+  drop: (endEvent, store, opt) => {
   },
@@ -62,2 +68,3 @@ }
   startEvent // mousedown or touchstart event
+  endEvent
 }
@@ -71,3 +78,3 @@ ```
 const destroy = draggableHelper(document.body, {
-  drag(startEvent, moveEvent, opt, store) {
+  drag(startEvent, moveEvent, store, opt) {
     // check trigger el
@@ -79,3 +86,3 @@ if (startEvent.target not has class 'your trigger class') {
   // get the element which will be moved
-  getEl: (dragHandlerEl, opt, store) => get the el which will be moved by `store.startEvent.target`
+  getEl: (dragHandlerEl, store, opt) => get the el which will be moved by `store.startEvent.target`
 })
@@ -90,5 +97,5 @@ ```
 * Event target has class `undraggable` or its ancestor till dragHandlerEl has.
-* opt.drag return false
+* opt.beforeDrag or opt.drag return false
 
 ## demo
 [jsfiddle](https://jsfiddle.net/phphe/t694kpua/19/)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

210134

increased by22%

Lines of code

1508

increased by70.78%

Number of lines in readme file

96

increased by7.87%

Worsened metrics

Dev dependency count

13

increased by85.71%

Dependency changes

• Updatedhelper-js@^1.4.13