react-drag-drop-container - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/react-drag-drop-container.js

@@ -9,2 +9,4 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.DragDropContainer = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -44,2 +46,4 @@
       'top': 0,
+      'initialLeftOffset': 0,
+      'initialTopOffset': 0,
       'clicked': false,
@@ -62,4 +66,7 @@ 'dragging': false,
 
+    this.checkForOffsetChanges = this.checkForOffsetChanges.bind(this);
+
     // the DOM elem we're dragging, and the elements we're dragging over
     this.dragElem = null;
+    this.containerElem = null;
     this.currentTarget = null;
@@ -72,2 +79,3 @@ this.prevTarget = null;
     value: function componentDidMount() {
+      this.containerElem = this.refs['drag_container'];
       // figure out what we're going to drag
@@ -77,3 +85,3 @@ if (this.props.dragGhost) {
       } else {
-        this.dragElem = this.refs['drag_container'];
+        this.dragElem = this.containerElem;
       }
@@ -176,2 +184,3 @@ // capture events
       if (!this.props.noDragging) {
+        e.preventDefault();
         document.addEventListener('touchmove', this.handleTouchMove);
@@ -186,5 +195,7 @@ document.addEventListener('touchend', this.handleTouchEnd);
       this.setState({
-        'clicked': true,
-        'clickX': x - this.state.left,
-        'clickY': y - this.state.top
+        clicked: true,
+        clickX: x - this.state.left,
+        clickY: y - this.state.top,
+        initialLeftOffset: this.containerElem.offsetLeft,
+        initialTopOffset: this.containerElem.offsetTop
       });
@@ -220,6 +231,14 @@ this.props.onStartDrag(this.props.dragData);
       this.generateEnterLeaveEvents(x, y);
+
+      var _checkForOffsetChanges = this.checkForOffsetChanges();
+
+      var _checkForOffsetChanges2 = _slicedToArray(_checkForOffsetChanges, 2);
+
+      var dx = _checkForOffsetChanges2[0];
+      var dy = _checkForOffsetChanges2[1];
+
       this.setState({
         dragging: true,
-        left: x - this.state.clickX,
-        top: y - this.state.clickY
+        left: dx + x - this.state.clickX,
+        top: dy + y - this.state.clickY
       });
@@ -262,2 +281,17 @@ this.props.onDragging(this.props.dragData, this.currentTarget, x, y);
   }, {
+    key: 'checkForOffsetChanges',
+    value: function checkForOffsetChanges() {
+      // deltas for when the system moves, e.g. from other elements on the page that change size on dragover.
+      var dx = undefined,
+          dy = undefined;
+      if (this.props.dragGhost) {
+        dx = this.state.initialLeftOffset - this.containerElem.offsetLeft;
+        dy = this.state.initialTopOffset - this.containerElem.offsetTop;
+      } else {
+        dx = this.state.initialLeftOffset + this.state.left - this.containerElem.offsetLeft;
+        dy = this.state.initialTopOffset + this.state.top - this.containerElem.offsetTop;
+      }
+      return [dx, dy];
+    }
+  }, {
     key: 'render',
@@ -264,0 +298,0 @@ value: function render() {

dist/react-drag-drop-container.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.DragDropContainer=e()}}(function(){return function e(t,n,r){function o(i,s){if(!n[i]){if(!t[i]){var u="function"==typeof require&&require;if(!s&&u)return u(i,!0);if(a)return a(i,!0);var d=new Error("Cannot find module '"+i+"'");throw d.code="MODULE_NOT_FOUND",d}var l=n[i]={exports:{}};t[i][0].call(l.exports,function(e){var n=t[i][1][e];return o(n?n:e)},l,l.exports,e,t,n,r)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<r.length;i++)o(r[i]);return o}({1:[function(e,t,n){(function(r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=function(e,t,n){for(var r=!0;r;){var o=e,a=t,i=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,a);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(i)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=a,n=i,r=!0,s=d=void 0}},d="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,l=o(d),p=e("./DragDropGhost"),c=o(p),h=function(e){function t(e){a(this,t),u(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={clickX:0,clickY:0,left:0,top:0,clicked:!1,dragging:!1,dragged:!1},this.handleMouseDown=this.handleMouseDown.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.startDrag=this.startDrag.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.drag=this.drag.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.drop=this.drop.bind(this),this.dragElem=null,this.currentTarget=null,this.prevTarget=null}return i(t,e),s(t,[{key:"componentDidMount",value:function(){this.props.dragGhost?this.dragElem=this.refs.drag_ghost.refs.the_ghost:this.dragElem=this.refs.drag_container;var e=this.refs.drag_container;if(this.props.dragHandleClassName)for(var t=e.getElementsByClassName(this.props.dragHandleClassName),n=0;n<t.length;n++)this.addListeners(t[n]);else this.addListeners(e)}},{key:"addListeners",value:function(e){var t=this;e.addEventListener("mousedown",function(e){t.handleMouseDown(e)},!1),e.addEventListener("touchstart",function(e){t.handleTouchStart(e)},!1)}},{key:"createEvent",value:function(e,t,n){var r,o=this;return"function"!=typeof window.CustomEvent?(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,!0,!0,{})):r=new CustomEvent(e,{bubbles:!0,cancelable:!0}),r.dataTransfer={getData:function(e){return e===o.props.dataKey?o.props.dragData:void 0},types:[this.props.dataKey]},r.sourceElement=this.refs.drag_container,r}},{key:"setCurrentTarget",value:function(e,t){this.dragElem.style.zIndex=-1;var n=document.elementFromPoint(e,t)||document.body;this.dragElem.style.zIndex=this.props.zIndex,this.currentTarget=this.dragElem.contains(n)?document.body:n}},{key:"generateEnterLeaveEvents",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget!==this.prevTarget&&(this.prevTarget&&this.prevTarget.dispatchEvent(this.createEvent(this.props.customEventNameDragLeave,e,t)),this.currentTarget&&this.currentTarget.dispatchEvent(this.createEvent(this.props.customEventNameDragEnter,e,t))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.createEvent(this.props.customEventNameDrop,e,t))}},{key:"handleMouseDown",value:function(e){1!==e.buttons||this.props.noDragging||(document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),this.startDrag(e.clientX,e.clientY))}},{key:"handleTouchStart",value:function(e){this.props.noDragging||(document.addEventListener("touchmove",this.handleTouchMove),document.addEventListener("touchend",this.handleTouchEnd),this.startDrag(e.targetTouches[0].pageX,e.targetTouches[0].pageY))}},{key:"startDrag",value:function(e,t){this.setState({clicked:!0,clickX:e-this.state.left,clickY:t-this.state.top}),this.props.onStartDrag(this.props.dragData)}},{key:"handleMouseMove",value:function(e){this.props.noDragging||(e.preventDefault(),this.state.clicked&&this.drag(e.clientX,e.clientY))}},{key:"handleTouchMove",value:function(e){this.props.noDragging||(e.preventDefault(),this.state.clicked&&this.drag(e.targetTouches[0].pageX,e.targetTouches[0].pageY))}},{key:"drag",value:function(e,t){this.generateEnterLeaveEvents(e,t),this.setState({dragging:!0,left:e-this.state.clickX,top:t-this.state.clickY}),this.props.onDragging(this.props.dragData,this.currentTarget,e,t)}},{key:"handleMouseUp",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.drop(e.clientX,e.clientY))}},{key:"handleTouchEnd",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("touchmove",this.handleTouchMove),document.removeEventListener("touchend",this.handleTouchEnd),this.drop(e.changedTouches[0].pageX,e.changedTouches[0].pageY))}},{key:"drop",value:function(e,t){this.generateDropEvent(e,t),this.props.returnToBase?this.setState({left:0,top:0,dragging:!1}):this.setState({dragged:!0,dragging:!1}),this.props.onEndDrag(this.props.dragData,this.currentTarget,e,t)}},{key:"render",value:function(){var e={position:"relative"},t="";return this.props.dragGhost?t=l["default"].createElement(c["default"],{dragging:this.state.dragging,left:this.state.left,top:this.state.top,zIndex:this.props.zIndex,ref:"drag_ghost"},this.props.dragGhost):(e.left=this.state.left,e.top=this.state.top,e.zIndex=this.state.dragging||this.state.dragged?this.props.zIndex:"inherit"),l["default"].createElement("div",{style:e,ref:"drag_container"},this.props.children,t)}}]),t}(l["default"].Component);h.propTypes={children:l["default"].PropTypes.any,customEventNameDragEnter:l["default"].PropTypes.string,customEventNameDragLeave:l["default"].PropTypes.string,customEventNameDrop:l["default"].PropTypes.string,dataKey:l["default"].PropTypes.string,dragData:l["default"].PropTypes.object,dragGhost:l["default"].PropTypes.node,dragHandleClassName:l["default"].PropTypes.string,noDragging:l["default"].PropTypes.bool,onDragging:l["default"].PropTypes.func,onEndDrag:l["default"].PropTypes.func,onStartDrag:l["default"].PropTypes.func,returnToBase:l["default"].PropTypes.bool,zIndex:l["default"].PropTypes.number},h.defaultProps={onStartDrag:function(){},onDragging:function(){},onEndDrag:function(){},dragData:{},dataKey:"data",noDragging:!1,returnToBase:!0,customEventNameDragEnter:"dragEnter",customEventNameDragLeave:"dragLeave",customEventNameDrop:"drop",zIndex:1e3},n["default"]=h,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./DragDropGhost":2}],2:[function(e,t,n){(function(e){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,a=t,i=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,a);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(i)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=a,n=i,r=!0,s=d=void 0}},u="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,d=r(u),l=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return a(t,e),i(t,[{key:"render",value:function(){var e={position:"absolute",zIndex:this.props.zIndex,left:this.props.left,top:this.props.top,display:this.props.dragging?"block":"none"};return d["default"].createElement("div",{style:e,ref:"the_ghost"},this.props.children)}}]),t}(d["default"].Component);l.propTypes={children:d["default"].PropTypes.any,display:d["default"].PropTypes.string,dragging:d["default"].PropTypes.bool,left:d["default"].PropTypes.number,top:d["default"].PropTypes.number,zIndex:d["default"].PropTypes.number},n["default"]=l,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.DragDropContainer=e()}}(function(){return function e(t,n,r){function o(a,s){if(!n[a]){if(!t[a]){var u="function"==typeof require&&require;if(!s&&u)return u(a,!0);if(i)return i(a,!0);var d=new Error("Cannot find module '"+a+"'");throw d.code="MODULE_NOT_FOUND",d}var l=n[a]={exports:{}};t[a][0].call(l.exports,function(e){var n=t[a][1][e];return o(n?n:e)},l,l.exports,e,t,n,r)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<r.length;a++)o(r[a]);return o}({1:[function(e,t,n){(function(r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var s=function(){function e(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(u){o=!0,i=u}finally{try{!r&&s["return"]&&s["return"]()}finally{if(o)throw i}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),u=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),d=function(e,t,n){for(var r=!0;r;){var o=e,i=t,a=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,i);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(a)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=i,n=a,r=!0,s=d=void 0}},l="undefined"!=typeof window?window.React:"undefined"!=typeof r?r.React:null,f=o(l),p=e("./DragDropGhost"),c=o(p),h=function(e){function t(e){i(this,t),d(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={clickX:0,clickY:0,left:0,top:0,initialLeftOffset:0,initialTopOffset:0,clicked:!1,dragging:!1,dragged:!1},this.handleMouseDown=this.handleMouseDown.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.startDrag=this.startDrag.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.drag=this.drag.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.drop=this.drop.bind(this),this.checkForOffsetChanges=this.checkForOffsetChanges.bind(this),this.dragElem=null,this.containerElem=null,this.currentTarget=null,this.prevTarget=null}return a(t,e),u(t,[{key:"componentDidMount",value:function(){this.containerElem=this.refs.drag_container,this.props.dragGhost?this.dragElem=this.refs.drag_ghost.refs.the_ghost:this.dragElem=this.containerElem;var e=this.refs.drag_container;if(this.props.dragHandleClassName)for(var t=e.getElementsByClassName(this.props.dragHandleClassName),n=0;n<t.length;n++)this.addListeners(t[n]);else this.addListeners(e)}},{key:"addListeners",value:function(e){var t=this;e.addEventListener("mousedown",function(e){t.handleMouseDown(e)},!1),e.addEventListener("touchstart",function(e){t.handleTouchStart(e)},!1)}},{key:"createEvent",value:function(e,t,n){var r,o=this;return"function"!=typeof window.CustomEvent?(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,!0,!0,{})):r=new CustomEvent(e,{bubbles:!0,cancelable:!0}),r.dataTransfer={getData:function(e){return e===o.props.dataKey?o.props.dragData:void 0},types:[this.props.dataKey]},r.sourceElement=this.refs.drag_container,r}},{key:"setCurrentTarget",value:function(e,t){this.dragElem.style.zIndex=-1;var n=document.elementFromPoint(e,t)||document.body;this.dragElem.style.zIndex=this.props.zIndex,this.currentTarget=this.dragElem.contains(n)?document.body:n}},{key:"generateEnterLeaveEvents",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget!==this.prevTarget&&(this.prevTarget&&this.prevTarget.dispatchEvent(this.createEvent(this.props.customEventNameDragLeave,e,t)),this.currentTarget&&this.currentTarget.dispatchEvent(this.createEvent(this.props.customEventNameDragEnter,e,t))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.createEvent(this.props.customEventNameDrop,e,t))}},{key:"handleMouseDown",value:function(e){1!==e.buttons||this.props.noDragging||(document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),this.startDrag(e.clientX,e.clientY))}},{key:"handleTouchStart",value:function(e){this.props.noDragging||(e.preventDefault(),document.addEventListener("touchmove",this.handleTouchMove),document.addEventListener("touchend",this.handleTouchEnd),this.startDrag(e.targetTouches[0].pageX,e.targetTouches[0].pageY))}},{key:"startDrag",value:function(e,t){this.setState({clicked:!0,clickX:e-this.state.left,clickY:t-this.state.top,initialLeftOffset:this.containerElem.offsetLeft,initialTopOffset:this.containerElem.offsetTop}),this.props.onStartDrag(this.props.dragData)}},{key:"handleMouseMove",value:function(e){this.props.noDragging||(e.preventDefault(),this.state.clicked&&this.drag(e.clientX,e.clientY))}},{key:"handleTouchMove",value:function(e){this.props.noDragging||(e.preventDefault(),this.state.clicked&&this.drag(e.targetTouches[0].pageX,e.targetTouches[0].pageY))}},{key:"drag",value:function(e,t){this.generateEnterLeaveEvents(e,t);var n=this.checkForOffsetChanges(),r=s(n,2),o=r[0],i=r[1];this.setState({dragging:!0,left:o+e-this.state.clickX,top:i+t-this.state.clickY}),this.props.onDragging(this.props.dragData,this.currentTarget,e,t)}},{key:"handleMouseUp",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),this.drop(e.clientX,e.clientY))}},{key:"handleTouchEnd",value:function(e){this.setState({clicked:!1}),this.state.dragging&&(document.removeEventListener("touchmove",this.handleTouchMove),document.removeEventListener("touchend",this.handleTouchEnd),this.drop(e.changedTouches[0].pageX,e.changedTouches[0].pageY))}},{key:"drop",value:function(e,t){this.generateDropEvent(e,t),this.props.returnToBase?this.setState({left:0,top:0,dragging:!1}):this.setState({dragged:!0,dragging:!1}),this.props.onEndDrag(this.props.dragData,this.currentTarget,e,t)}},{key:"checkForOffsetChanges",value:function(){var e=void 0,t=void 0;return this.props.dragGhost?(e=this.state.initialLeftOffset-this.containerElem.offsetLeft,t=this.state.initialTopOffset-this.containerElem.offsetTop):(e=this.state.initialLeftOffset+this.state.left-this.containerElem.offsetLeft,t=this.state.initialTopOffset+this.state.top-this.containerElem.offsetTop),[e,t]}},{key:"render",value:function(){var e={position:"relative"},t="";return this.props.dragGhost?t=f["default"].createElement(c["default"],{dragging:this.state.dragging,left:this.state.left,top:this.state.top,zIndex:this.props.zIndex,ref:"drag_ghost"},this.props.dragGhost):(e.left=this.state.left,e.top=this.state.top,e.zIndex=this.state.dragging||this.state.dragged?this.props.zIndex:"inherit"),f["default"].createElement("div",{style:e,ref:"drag_container"},this.props.children,t)}}]),t}(f["default"].Component);h.propTypes={children:f["default"].PropTypes.any,customEventNameDragEnter:f["default"].PropTypes.string,customEventNameDragLeave:f["default"].PropTypes.string,customEventNameDrop:f["default"].PropTypes.string,dataKey:f["default"].PropTypes.string,dragData:f["default"].PropTypes.object,dragGhost:f["default"].PropTypes.node,dragHandleClassName:f["default"].PropTypes.string,noDragging:f["default"].PropTypes.bool,onDragging:f["default"].PropTypes.func,onEndDrag:f["default"].PropTypes.func,onStartDrag:f["default"].PropTypes.func,returnToBase:f["default"].PropTypes.bool,zIndex:f["default"].PropTypes.number},h.defaultProps={onStartDrag:function(){},onDragging:function(){},onEndDrag:function(){},dragData:{},dataKey:"data",noDragging:!1,returnToBase:!0,customEventNameDragEnter:"dragEnter",customEventNameDragLeave:"dragLeave",customEventNameDrop:"drop",zIndex:1e3},n["default"]=h,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./DragDropGhost":2}],2:[function(e,t,n){(function(e){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,i=t,a=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,i);if(void 0!==s){if("value"in s)return s.value;var u=s.get;if(void 0===u)return;return u.call(a)}var d=Object.getPrototypeOf(o);if(null===d)return;e=d,t=i,n=a,r=!0,s=d=void 0}},u="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,d=r(u),l=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),a(t,[{key:"render",value:function(){var e={position:"absolute",zIndex:this.props.zIndex,left:this.props.left,top:this.props.top,display:this.props.dragging?"block":"none"};return d["default"].createElement("div",{style:e,ref:"the_ghost"},this.props.children)}}]),t}(d["default"].Component);l.propTypes={children:d["default"].PropTypes.any,display:d["default"].PropTypes.string,dragging:d["default"].PropTypes.bool,left:d["default"].PropTypes.number,top:d["default"].PropTypes.number,zIndex:d["default"].PropTypes.number},n["default"]=l,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

example/src/example.js

@@ -5,2 +5,3 @@ var React = require('react');
 import Gorilla from './Gorilla';
+import ExpandsOnDragEnter from './ExpandsOnDragEnter';
 
@@ -14,4 +15,8 @@ var App = React.createClass({
 				</DragDropContainer>
-
 				<div style={{ 'float': 'left' }}>
+					<br/><br/><br/><br/><br/><br/><br/><br/><br/>
+					<ExpandsOnDragEnter/>
+				</div>
+				<div style={{ 'float': 'left' }}>
+					<ExpandsOnDragEnter/>
 					<DragDropContainer 
@@ -51,5 +56,5 @@ dataKey="food_data"
 					>
-						<div>
+						<div style={{width: 80, textAlign: "center"}}>
 							<div className="drag_handle" style={{backgroundColor:"#aaa"}}>drag handle</div>
-							<div style={{backgroundColor: "#eee"}}>this<br/>you<br/>cannot<br/>grab!<br/></div>
+							<div style={{backgroundColor: "#eee"}}>Dog<br/>Food<br/><br/>(use<br/>drag<br/>handles)<br/></div>
 							<div className="drag_handle" style={{backgroundColor:"#aaa"}}>drag handle</div>
@@ -56,0 +61,0 @@ </div>

lib/DragDropContainer.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+
 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
@@ -42,2 +44,4 @@
       'top': 0,
+      'initialLeftOffset': 0,
+      'initialTopOffset': 0,
       'clicked': false,
@@ -60,4 +64,7 @@ 'dragging': false,
 
+    this.checkForOffsetChanges = this.checkForOffsetChanges.bind(this);
+
     // the DOM elem we're dragging, and the elements we're dragging over
     this.dragElem = null;
+    this.containerElem = null;
     this.currentTarget = null;
@@ -70,2 +77,3 @@ this.prevTarget = null;
     value: function componentDidMount() {
+      this.containerElem = this.refs['drag_container'];
       // figure out what we're going to drag
@@ -75,3 +83,3 @@ if (this.props.dragGhost) {
       } else {
-        this.dragElem = this.refs['drag_container'];
+        this.dragElem = this.containerElem;
       }
@@ -174,2 +182,3 @@ // capture events
       if (!this.props.noDragging) {
+        e.preventDefault();
         document.addEventListener('touchmove', this.handleTouchMove);
@@ -184,5 +193,7 @@ document.addEventListener('touchend', this.handleTouchEnd);
       this.setState({
-        'clicked': true,
-        'clickX': x - this.state.left,
-        'clickY': y - this.state.top
+        clicked: true,
+        clickX: x - this.state.left,
+        clickY: y - this.state.top,
+        initialLeftOffset: this.containerElem.offsetLeft,
+        initialTopOffset: this.containerElem.offsetTop
       });
@@ -218,6 +229,14 @@ this.props.onStartDrag(this.props.dragData);
       this.generateEnterLeaveEvents(x, y);
+
+      var _checkForOffsetChanges = this.checkForOffsetChanges();
+
+      var _checkForOffsetChanges2 = _slicedToArray(_checkForOffsetChanges, 2);
+
+      var dx = _checkForOffsetChanges2[0];
+      var dy = _checkForOffsetChanges2[1];
+
       this.setState({
         dragging: true,
-        left: x - this.state.clickX,
-        top: y - this.state.clickY
+        left: dx + x - this.state.clickX,
+        top: dy + y - this.state.clickY
       });
@@ -260,2 +279,17 @@ this.props.onDragging(this.props.dragData, this.currentTarget, x, y);
   }, {
+    key: 'checkForOffsetChanges',
+    value: function checkForOffsetChanges() {
+      // deltas for when the system moves, e.g. from other elements on the page that change size on dragover.
+      var dx = undefined,
+          dy = undefined;
+      if (this.props.dragGhost) {
+        dx = this.state.initialLeftOffset - this.containerElem.offsetLeft;
+        dy = this.state.initialTopOffset - this.containerElem.offsetTop;
+      } else {
+        dx = this.state.initialLeftOffset + this.state.left - this.containerElem.offsetLeft;
+        dy = this.state.initialTopOffset + this.state.top - this.containerElem.offsetTop;
+      }
+      return [dx, dy];
+    }
+  }, {
     key: 'render',
@@ -262,0 +296,0 @@ value: function render() {

package.json

 {
   "name": "react-drag-drop-container",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "DragDropContainer",
@@ -5,0 +5,0 @@ "main": "lib/DragDropContainer.js",

src/DragDropContainer.js

@@ -16,2 +16,4 @@ import React from 'react';
       'top': 0,
+      'initialLeftOffset': 0,
+      'initialTopOffset': 0,
       'clicked': false,
@@ -34,4 +36,7 @@ 'dragging': false,
 
+    this.checkForOffsetChanges = this.checkForOffsetChanges.bind(this);
+
     // the DOM elem we're dragging, and the elements we're dragging over
     this.dragElem = null;
+    this.containerElem = null;
     this.currentTarget = null;
@@ -42,2 +47,3 @@ this.prevTarget = null;
   componentDidMount() {
+    this.containerElem = this.refs['drag_container'];
     // figure out what we're going to drag
@@ -47,3 +53,3 @@ if (this.props.dragGhost) {
     } else {
-      this.dragElem = this.refs['drag_container'];
+      this.dragElem = this.containerElem;
     }
@@ -124,2 +130,3 @@ // capture events
     if (!this.props.noDragging) {
+      e.preventDefault();
       document.addEventListener('touchmove', this.handleTouchMove);
@@ -133,5 +140,7 @@ document.addEventListener('touchend', this.handleTouchEnd);
     this.setState({
-      'clicked': true,
-      'clickX': x - this.state.left,
-      'clickY': y - this.state.top
+      clicked: true,
+      clickX: x - this.state.left,
+      clickY: y - this.state.top,
+      initialLeftOffset: this.containerElem.offsetLeft,
+      initialTopOffset: this.containerElem.offsetTop,
     });
@@ -163,6 +172,7 @@ this.props.onStartDrag(this.props.dragData);
     this.generateEnterLeaveEvents(x, y);
+    let [dx, dy] = this.checkForOffsetChanges();
     this.setState({
       dragging: true,
-      left: x - this.state.clickX,
-      top: y - this.state.clickY
+      left: dx + x - this.state.clickX,
+      top: dy + y - this.state.clickY
     });
@@ -201,2 +211,15 @@ this.props.onDragging(this.props.dragData, this.currentTarget, x, y);
 
+  checkForOffsetChanges(){
+    // deltas for when the system moves, e.g. from other elements on the page that change size on dragover.
+    let dx, dy;
+    if (this.props.dragGhost) {
+      dx = this.state.initialLeftOffset - this.containerElem.offsetLeft;
+      dy = this.state.initialTopOffset - this.containerElem.offsetTop;
+    } else {
+      dx = this.state.initialLeftOffset + this.state.left - this.containerElem.offsetLeft;
+      dy = this.state.initialTopOffset + this.state.top - this.containerElem.offsetTop;
+    }
+    return [dx, dy];
+  }
+
   render() {
@@ -203,0 +226,0 @@ var styles = {

No alert changes

Improved metrics

Total package byte prevSize

286300

increased by2.46%

Number of package files

25

increased by4.17%

Lines of code

1273

increased by10.12%

No dependency changes