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

Comparing version 2.0.0 to 2.0.1

dist/react-drag-drop-container.js

@@ -67,2 +67,3 @@ (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){
     this.checkForOffsetChanges = this.checkForOffsetChanges.bind(this);
+    this.getChildrenWithDraggableFalse = this.getChildrenWithDraggableFalse.bind(this);
 
@@ -142,3 +143,3 @@ // The DOM elem we're dragging, and the elements we're dragging over.
       // generate events as we enter and leave elements while dragging
-      var prefix = this.props.compatKey;
+      var prefix = this.props.targetKey;
       this.setCurrentTarget(x, y);
@@ -160,3 +161,3 @@ if (this.currentTarget !== this.prevTarget) {
       this.setCurrentTarget(x, y);
-      this.currentTarget.dispatchEvent(this.createEvent(this.props.compatKey + 'Drop', x, y));
+      this.currentTarget.dispatchEvent(this.createEvent(this.props.targetKey + 'Drop', x, y));
     }
@@ -187,2 +188,3 @@
     value: function startDrag(x, y) {
+      document.addEventListener(this.props.targetKey + 'Dropped', this.props.onDropped);
       this.setState({
@@ -232,7 +234,10 @@ clicked: true,
 
-      this.setState({
-        dragging: true,
-        left: dx + x - this.state.clickX,
-        top: dy + y - this.state.clickY
-      });
+      var stateChanges = { dragging: true };
+      if (!this.props.yOnly) {
+        stateChanges['left'] = dx + x - this.state.clickX;
+      }
+      if (!this.props.xOnly) {
+        stateChanges['top'] = dy + y - this.state.clickY;
+      }
+      this.setState(stateChanges);
       this.props.onDragging(this.props.dragData, this.currentTarget, x, y);
@@ -265,2 +270,3 @@ }
     value: function drop(x, y) {
+      // document.removeEventListener(`${this.props.targetKey}Dropped`, this.handleDrop);
       this.generateDropEvent(x, y);
@@ -290,2 +296,12 @@ if (this.props.returnToBase) {
   }, {
+    key: 'getChildrenWithDraggableFalse',
+    value: function getChildrenWithDraggableFalse() {
+      // because otherwise can conflict with built-in browser dragging behavior
+      var inputReactObject = _react2['default'].Children.only(this.props.children);
+      var clonedChild = _react2['default'].cloneElement(inputReactObject, {
+        draggable: "false"
+      });
+      return clonedChild;
+    }
+  }, {
     key: 'render',
@@ -314,3 +330,3 @@ value: function render() {
         { style: styles, ref: 'drag_container' },
-        this.props.children,
+        this.getChildrenWithDraggableFalse(),
         ghost
@@ -328,3 +344,3 @@ );
   // Determines what you can drop on
-  compatKey: _react2['default'].PropTypes.string,
+  targetKey: _react2['default'].PropTypes.string,
 
@@ -344,2 +360,3 @@ // We will pass this to the target when you drag or drop over it
   // callbacks (optional):
+  onDropped: _react2['default'].PropTypes.func,
   onDragging: _react2['default'].PropTypes.func,
@@ -352,2 +369,6 @@ onEndDrag: _react2['default'].PropTypes.func,
 
+  // Constrain dragging to the x or y directions only
+  xOnly: _react2['default'].PropTypes.bool,
+  yOnly: _react2['default'].PropTypes.bool,
+
   // Defaults to 1000 while dragging, but you can customize it
@@ -358,3 +379,3 @@ zIndex: _react2['default'].PropTypes.number
 DragDropContainer.defaultProps = {
-  compatKey: 'ddc',
+  targetKey: 'ddc',
   dragData: {},
@@ -366,4 +387,7 @@ dragGhost: null,
   onEndDrag: function onEndDrag() {},
+  onDropped: function onDropped() {},
   noDragging: false,
   returnToBase: false,
+  xOnly: false,
+  yOnly: false,
   zIndex: 1000
@@ -472,6 +496,8 @@ };
 
-  function DropTarget() {
+  function DropTarget(props) {
     _classCallCheck(this, DropTarget);
 
-    _get(Object.getPrototypeOf(DropTarget.prototype), 'constructor', this).apply(this, arguments);
+    _get(Object.getPrototypeOf(DropTarget.prototype), 'constructor', this).call(this, props);
+    this.elem = null;
+    this.handleDrop = this.handleDrop.bind(this);
   }
@@ -484,14 +510,37 @@
 
-      var elem = this.refs.drop_target;
-      elem.addEventListener(this.props.compatKey + 'DragEnter', function (e) {
+      this.elem = this.refs.drop_target;
+      this.elem.addEventListener(this.props.targetKey + 'DragEnter', function (e) {
         _this.props.onDragEnter(e);
       }, false);
-      elem.addEventListener(this.props.compatKey + 'DragLeave', function (e) {
+      this.elem.addEventListener(this.props.targetKey + 'DragLeave', function (e) {
         _this.props.onDragLeave(e);
       }, false);
-      elem.addEventListener(this.props.compatKey + 'Drop', function (e) {
-        _this.props.onDrop(e);
+      this.elem.addEventListener(this.props.targetKey + 'Drop', function (e) {
+        _this.handleDrop(e);
       }, false);
     }
   }, {
+    key: 'createEvent',
+    value: function createEvent(eventName, eventData) {
+      // utility to create an event
+      var e = undefined;
+      if (typeof window.CustomEvent !== 'function') {
+        // we are in IE 11 and must use old-style method of creating event
+        e = document.createEvent('CustomEvent');
+        e.initCustomEvent(eventName, true, true, {});
+      } else {
+        e = new CustomEvent(eventName, { 'bubbles': true, 'cancelable': true });
+      }
+      _extends(e, eventData);
+      return e;
+    }
+  }, {
+    key: 'handleDrop',
+    value: function handleDrop(e) {
+      // tell the drop source about the drop, then do the callback
+      var evt = this.createEvent(this.props.targetKey + 'Dropped', { dropElem: this.elem, dropData: this.props.dropData });
+      e.sourceElem.dispatchEvent(evt);
+      this.props.onDrop(e);
+    }
+  }, {
     key: 'render',
@@ -512,6 +561,7 @@ value: function render() {
   children: _react2['default'].PropTypes.any.isRequired,
-  compatKey: _react2['default'].PropTypes.string,
+  targetKey: _react2['default'].PropTypes.string,
   onDragEnter: _react2['default'].PropTypes.func,
   onDragLeave: _react2['default'].PropTypes.func,
   onDrop: _react2['default'].PropTypes.func,
+  dropData: _react2['default'].PropTypes.object,
   style: _react2['default'].PropTypes.object
@@ -521,3 +571,3 @@ };
 DropTarget.defaultProps = {
-  compatKey: 'ddc',
+  targetKey: 'ddc',
   onDragEnter: function onDragEnter() {
@@ -532,2 +582,3 @@ console.log('drag enter');
   },
+  dropData: {},
   style: {}
@@ -534,0 +585,0 @@ };

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(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 l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var p=n[a]={exports:{}};t[a][0].call(p.exports,function(e){var n=t[a][1][e];return o(n?n:e)},p,p.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(t){"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){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")}}(),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,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 l=Object.getPrototypeOf(o);if(null===l)return;e=l,t=i,n=a,r=!0,s=l=void 0}},l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},p="undefined"!=typeof window?window.React:"undefined"!=typeof t?t.React:null,f=r(p),d=e("./DragDropGhost"),c=r(d),h=e("./DropTarget"),g=r(h),v=function(e){function t(e){o(this,t),u(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 i(t,e),s(t,[{key:"componentDidMount",value:function(){if(this.containerElem=this.refs.drag_container,this.props.dragGhost?this.dragElem=this.refs.drag_ghost.refs.the_ghost:this.dragElem=this.containerElem,this.props.dragHandleClassName)for(var e=this.containerElem.getElementsByClassName(this.props.dragHandleClassName),t=0;t<e.length;t++)this.addListeners(e[t]);else this.addListeners(this.containerElem)}},{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=void 0;return"function"!=typeof window.CustomEvent?(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,!0,!0,{})):r=new CustomEvent(e,{bubbles:!0,cancelable:!0}),l(r,{dragData:this.props.dragData,dragElem:this.dragElem,sourceElem:this.containerElem}),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){var n=this.props.compatKey;this.setCurrentTarget(e,t),this.currentTarget!==this.prevTarget&&(this.prevTarget&&this.prevTarget.dispatchEvent(this.createEvent(n+"DragLeave",e,t)),this.currentTarget&&this.currentTarget.dispatchEvent(this.createEvent(n+"DragEnter",e,t))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.createEvent(this.props.compatKey+"Drop",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.state.dragged?this.state.initialLeftOffset:this.containerElem.offsetLeft,initialTopOffset:this.state.dragged?this.state.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=a(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);v.propTypes={children:f["default"].PropTypes.any.isRequired,compatKey: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},v.defaultProps={compatKey:"ddc",dragData:{},dragGhost:null,dragHandleClassName:"",onStartDrag:function(){},onDragging:function(){},onEndDrag:function(){},noDragging:!1,returnToBase:!1,zIndex:1e3},n.DragDropContainer=v,n.DropTarget=g["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./DragDropGhost":2,"./DropTarget":3}],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 l=Object.getPrototypeOf(o);if(null===l)return;e=l,t=i,n=a,r=!0,s=l=void 0}},u="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,l=r(u),p=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 l["default"].createElement("div",{style:e,ref:"the_ghost"},this.props.children)}}]),t}(l["default"].Component);p.propTypes={children:l["default"].PropTypes.any,display:l["default"].PropTypes.string,dragging:l["default"].PropTypes.bool,left:l["default"].PropTypes.number,top:l["default"].PropTypes.number,zIndex:l["default"].PropTypes.number},n["default"]=p,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],3:[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 l=Object.getPrototypeOf(o);if(null===l)return;e=l,t=i,n=a,r=!0,s=l=void 0}},u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,p=r(l),f=function(e){function t(){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),a(t,[{key:"componentDidMount",value:function(){var e=this,t=this.refs.drop_target;t.addEventListener(this.props.compatKey+"DragEnter",function(t){e.props.onDragEnter(t)},!1),t.addEventListener(this.props.compatKey+"DragLeave",function(t){e.props.onDragLeave(t)},!1),t.addEventListener(this.props.compatKey+"Drop",function(t){e.props.onDrop(t)},!1)}},{key:"render",value:function(){return p["default"].createElement("div",{ref:"drop_target",style:u({display:"inline-block"},this.props.style)},this.props.children)}}]),t}(p["default"].Component);f.propTypes={children:p["default"].PropTypes.any.isRequired,compatKey:p["default"].PropTypes.string,onDragEnter:p["default"].PropTypes.func,onDragLeave:p["default"].PropTypes.func,onDrop:p["default"].PropTypes.func,style:p["default"].PropTypes.object},f.defaultProps={compatKey:"ddc",onDragEnter:function(){console.log("drag enter")},onDragLeave:function(){console.log("drag leave")},onDrop:function(){console.log("dropped!")},style:{}},n["default"]=f,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 l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var d=n[a]={exports:{}};t[a][0].call(d.exports,function(e){var n=t[a][1][e];return o(n?n:e)},d,d.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(t){"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){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")}}(),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,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 l=Object.getPrototypeOf(o);if(null===l)return;e=l,t=i,n=a,r=!0,s=l=void 0}},l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d="undefined"!=typeof window?window.React:"undefined"!=typeof t?t.React:null,p=r(d),f=e("./DragDropGhost"),c=r(f),h=e("./DropTarget"),g=r(h),v=function(e){function t(e){o(this,t),u(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.getChildrenWithDraggableFalse=this.getChildrenWithDraggableFalse.bind(this),this.dragElem=null,this.containerElem=null,this.currentTarget=null,this.prevTarget=null}return i(t,e),s(t,[{key:"componentDidMount",value:function(){if(this.containerElem=this.refs.drag_container,this.props.dragGhost?this.dragElem=this.refs.drag_ghost.refs.the_ghost:this.dragElem=this.containerElem,this.props.dragHandleClassName)for(var e=this.containerElem.getElementsByClassName(this.props.dragHandleClassName),t=0;t<e.length;t++)this.addListeners(e[t]);else this.addListeners(this.containerElem)}},{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=void 0;return"function"!=typeof window.CustomEvent?(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,!0,!0,{})):r=new CustomEvent(e,{bubbles:!0,cancelable:!0}),l(r,{dragData:this.props.dragData,dragElem:this.dragElem,sourceElem:this.containerElem}),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){var n=this.props.targetKey;this.setCurrentTarget(e,t),this.currentTarget!==this.prevTarget&&(this.prevTarget&&this.prevTarget.dispatchEvent(this.createEvent(n+"DragLeave",e,t)),this.currentTarget&&this.currentTarget.dispatchEvent(this.createEvent(n+"DragEnter",e,t))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.createEvent(this.props.targetKey+"Drop",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){document.addEventListener(this.props.targetKey+"Dropped",this.props.onDropped),this.setState({clicked:!0,clickX:e-this.state.left,clickY:t-this.state.top,initialLeftOffset:this.state.dragged?this.state.initialLeftOffset:this.containerElem.offsetLeft,initialTopOffset:this.state.dragged?this.state.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=a(n,2),o=r[0],i=r[1],s={dragging:!0};this.props.yOnly||(s.left=o+e-this.state.clickX),this.props.xOnly||(s.top=i+t-this.state.clickY),this.setState(s),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:"getChildrenWithDraggableFalse",value:function(){var e=p["default"].Children.only(this.props.children),t=p["default"].cloneElement(e,{draggable:"false"});return t}},{key:"render",value:function(){var e={position:"relative"},t="";return this.props.dragGhost?t=p["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"),p["default"].createElement("div",{style:e,ref:"drag_container"},this.getChildrenWithDraggableFalse(),t)}}]),t}(p["default"].Component);v.propTypes={children:p["default"].PropTypes.any.isRequired,targetKey:p["default"].PropTypes.string,dragData:p["default"].PropTypes.object,dragGhost:p["default"].PropTypes.node,dragHandleClassName:p["default"].PropTypes.string,noDragging:p["default"].PropTypes.bool,onDropped:p["default"].PropTypes.func,onDragging:p["default"].PropTypes.func,onEndDrag:p["default"].PropTypes.func,onStartDrag:p["default"].PropTypes.func,returnToBase:p["default"].PropTypes.bool,xOnly:p["default"].PropTypes.bool,yOnly:p["default"].PropTypes.bool,zIndex:p["default"].PropTypes.number},v.defaultProps={targetKey:"ddc",dragData:{},dragGhost:null,dragHandleClassName:"",onStartDrag:function(){},onDragging:function(){},onEndDrag:function(){},onDropped:function(){},noDragging:!1,returnToBase:!1,xOnly:!1,yOnly:!1,zIndex:1e3},n.DragDropContainer=v,n.DropTarget=g["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./DragDropGhost":2,"./DropTarget":3}],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 l=Object.getPrototypeOf(o);if(null===l)return;e=l,t=i,n=a,r=!0,s=l=void 0}},u="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,l=r(u),d=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 l["default"].createElement("div",{style:e,ref:"the_ghost"},this.props.children)}}]),t}(l["default"].Component);d.propTypes={children:l["default"].PropTypes.any,display:l["default"].PropTypes.string,dragging:l["default"].PropTypes.bool,left:l["default"].PropTypes.number,top:l["default"].PropTypes.number,zIndex:l["default"].PropTypes.number},n["default"]=d,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],3:[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 l=Object.getPrototypeOf(o);if(null===l)return;e=l,t=i,n=a,r=!0,s=l=void 0}},u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,d=r(l),p=function(e){function t(e){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.elem=null,this.handleDrop=this.handleDrop.bind(this)}return i(t,e),a(t,[{key:"componentDidMount",value:function(){var e=this;this.elem=this.refs.drop_target,this.elem.addEventListener(this.props.targetKey+"DragEnter",function(t){e.props.onDragEnter(t)},!1),this.elem.addEventListener(this.props.targetKey+"DragLeave",function(t){e.props.onDragLeave(t)},!1),this.elem.addEventListener(this.props.targetKey+"Drop",function(t){e.handleDrop(t)},!1)}},{key:"createEvent",value:function(e,t){var n=void 0;return"function"!=typeof window.CustomEvent?(n=document.createEvent("CustomEvent"),n.initCustomEvent(e,!0,!0,{})):n=new CustomEvent(e,{bubbles:!0,cancelable:!0}),u(n,t),n}},{key:"handleDrop",value:function(e){var t=this.createEvent(this.props.targetKey+"Dropped",{dropElem:this.elem,dropData:this.props.dropData});e.sourceElem.dispatchEvent(t),this.props.onDrop(e)}},{key:"render",value:function(){return d["default"].createElement("div",{ref:"drop_target",style:u({display:"inline-block"},this.props.style)},this.props.children)}}]),t}(d["default"].Component);p.propTypes={children:d["default"].PropTypes.any.isRequired,targetKey:d["default"].PropTypes.string,onDragEnter:d["default"].PropTypes.func,onDragLeave:d["default"].PropTypes.func,onDrop:d["default"].PropTypes.func,dropData:d["default"].PropTypes.object,style:d["default"].PropTypes.object},p.defaultProps={targetKey:"ddc",onDragEnter:function(){console.log("drag enter")},onDragLeave:function(){console.log("drag leave")},onDrop:function(){console.log("dropped!")},dropData:{},style:{}},n["default"]=p,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

example/src/example.js

@@ -35,6 +35,10 @@ var React = require('react');
 
+	landedOn(e) {
+		console.log('I was dropped on ' + e.dropData.name)
+	},
+
 	render () {
 		return (
 			<div>
-				<DragDropContainer>
+				<DragDropContainer xOnly={true}>
 					<DropTarget
@@ -44,3 +48,4 @@ onDrop={this.dropped}
 						onDragLeave={()=>{this.unHighlight('gorilla')}}
-						compatKey="gorilla"
+						targetKey="gorilla"
+						dropData={{name: 'Kong'}}
 					>
@@ -50,3 +55,3 @@ <Gorilla highlighted={this.state.gorillaHighlighted} />
 				</DragDropContainer>
-				<DragDropContainer>
+				<DragDropContainer yOnly={true}>
 					<DropTarget
@@ -56,3 +61,5 @@ onDrop={this.dropped}
 						onDragLeave={()=>{this.unHighlight('puppy')}}
-						compatKey="puppy">
+						targetKey="puppy"
+						dropData={{name: 'Sparky'}}
+					>
 						<Puppy highlighted={this.state.puppyHighlighted} />
@@ -70,4 +77,5 @@ </DropTarget>
 						returnToBase={true}
-						compatKey="gorilla"
+						targetKey="gorilla"
 						dragData={{'label': 'banana', 'tastes': 'yummy'}}
+						onDropped={this.landedOn}
 					>
@@ -78,6 +86,7 @@ <img src="https://s28.postimg.org/bocsgf43d/banana.png" height="45"/>
 					<DragDropContainer
-						compatKey="puppy"
+						targetKey="puppy"
 						returnToBase={true}
 						dragData={{'label': 'cheeseburger', 'tastes': 'excellent'}}
-						dragGhost={<div style={{backgroundColor: '#eaa', padding: 6, borderRadius: 4}}>Cheeseburger!</div>}
+						dragGhost={<div style={{backgroundColor: '#ddd', padding: 6, borderRadius: 4, textAlign: 'center'}}>Cheeseburger<br/>Drag Ghost</div>}
+						onDropped={this.landedOn}
 					>
@@ -88,5 +97,6 @@ <img src="https://s28.postimg.org/3o335ocjd/surprise.png" height="45"/>
 					<DragDropContainer
-						compatKey="gorilla"
+						targetKey="gorilla"
 						returnToBase={true}
 						dragData={{'label': 'orange', 'tastes': 'yummy'}}
+						onDropped={this.landedOn}
 					>
@@ -97,5 +107,6 @@ <img src="https://s28.postimg.org/3yalp0r5l/orange.png" height="45"/>
 					<DragDropContainer
-						compatKey="puppy"
+						targetKey="puppy"
 						returnToBase={true}
 						dragData={{'label': 'pickle', 'tastes': 'bad'}}
+						onDropped={this.landedOn}
 					>
@@ -109,6 +120,7 @@ <img src="https://s28.postimg.org/5em475u2h/pickle.png" height="45"/>
 					<DragDropContainer
-						compatKey="puppy"
+						targetKey="puppy"
 						returnToBase={true}
 						dragData={{'label': 'dogfood', 'tastes': 'yummy'}}
 						dragHandleClassName="drag_handle"
+						onDropped={this.landedOn}
 					>
@@ -115,0 +127,0 @@ <div style={{width: 80, textAlign: "center"}}>

example/src/ExpandsOnDragEnter.js

@@ -23,4 +23,4 @@ import React from 'react';
     return (
-      <DropTarget compatKey="puppy" onDragEnter={() => this.setState({big: true})} onDragLeave={() => this.setState({big: false})}>
-        <DropTarget compatKey="gorilla" onDragEnter={() => this.setState({big: true})} onDragLeave={() => this.setState({big: false})}>
+      <DropTarget targetKey="puppy" onDragEnter={() => this.setState({big: true})} onDragLeave={() => this.setState({big: false})}>
+        <DropTarget targetKey="gorilla" onDragEnter={() => this.setState({big: true})} onDragLeave={() => this.setState({big: false})}>
         <h3 style={styles} ref={(el) => {this.elem = el;}}>
@@ -27,0 +27,0 @@ EXPANDS<br/>ON<br/>DRAGOVER

example/src/Gorilla.js

@@ -16,3 +16,3 @@ import React from 'react';
       left: 650,
-      top: 200
+      top: 150
     };
@@ -41,3 +41,3 @@ return (
       left: 650,
-      top: 200
+      top: 0
     };
@@ -44,0 +44,0 @@ return (

lib/DragDropContainer.js

@@ -65,2 +65,3 @@ 'use strict';
     this.checkForOffsetChanges = this.checkForOffsetChanges.bind(this);
+    this.getChildrenWithDraggableFalse = this.getChildrenWithDraggableFalse.bind(this);
 
@@ -140,3 +141,3 @@ // The DOM elem we're dragging, and the elements we're dragging over.
       // generate events as we enter and leave elements while dragging
-      var prefix = this.props.compatKey;
+      var prefix = this.props.targetKey;
       this.setCurrentTarget(x, y);
@@ -158,3 +159,3 @@ if (this.currentTarget !== this.prevTarget) {
       this.setCurrentTarget(x, y);
-      this.currentTarget.dispatchEvent(this.createEvent(this.props.compatKey + 'Drop', x, y));
+      this.currentTarget.dispatchEvent(this.createEvent(this.props.targetKey + 'Drop', x, y));
     }
@@ -185,2 +186,3 @@
     value: function startDrag(x, y) {
+      document.addEventListener(this.props.targetKey + 'Dropped', this.props.onDropped);
       this.setState({
@@ -230,7 +232,10 @@ clicked: true,
 
-      this.setState({
-        dragging: true,
-        left: dx + x - this.state.clickX,
-        top: dy + y - this.state.clickY
-      });
+      var stateChanges = { dragging: true };
+      if (!this.props.yOnly) {
+        stateChanges['left'] = dx + x - this.state.clickX;
+      }
+      if (!this.props.xOnly) {
+        stateChanges['top'] = dy + y - this.state.clickY;
+      }
+      this.setState(stateChanges);
       this.props.onDragging(this.props.dragData, this.currentTarget, x, y);
@@ -263,2 +268,3 @@ }
     value: function drop(x, y) {
+      // document.removeEventListener(`${this.props.targetKey}Dropped`, this.handleDrop);
       this.generateDropEvent(x, y);
@@ -288,2 +294,12 @@ if (this.props.returnToBase) {
   }, {
+    key: 'getChildrenWithDraggableFalse',
+    value: function getChildrenWithDraggableFalse() {
+      // because otherwise can conflict with built-in browser dragging behavior
+      var inputReactObject = _react2['default'].Children.only(this.props.children);
+      var clonedChild = _react2['default'].cloneElement(inputReactObject, {
+        draggable: "false"
+      });
+      return clonedChild;
+    }
+  }, {
     key: 'render',
@@ -312,3 +328,3 @@ value: function render() {
         { style: styles, ref: 'drag_container' },
-        this.props.children,
+        this.getChildrenWithDraggableFalse(),
         ghost
@@ -326,3 +342,3 @@ );
   // Determines what you can drop on
-  compatKey: _react2['default'].PropTypes.string,
+  targetKey: _react2['default'].PropTypes.string,
 
@@ -342,2 +358,3 @@ // We will pass this to the target when you drag or drop over it
   // callbacks (optional):
+  onDropped: _react2['default'].PropTypes.func,
   onDragging: _react2['default'].PropTypes.func,
@@ -350,2 +367,6 @@ onEndDrag: _react2['default'].PropTypes.func,
 
+  // Constrain dragging to the x or y directions only
+  xOnly: _react2['default'].PropTypes.bool,
+  yOnly: _react2['default'].PropTypes.bool,
+
   // Defaults to 1000 while dragging, but you can customize it
@@ -356,3 +377,3 @@ zIndex: _react2['default'].PropTypes.number
 DragDropContainer.defaultProps = {
-  compatKey: 'ddc',
+  targetKey: 'ddc',
   dragData: {},
@@ -364,4 +385,7 @@ dragGhost: null,
   onEndDrag: function onEndDrag() {},
+  onDropped: function onDropped() {},
   noDragging: false,
   returnToBase: false,
+  xOnly: false,
+  yOnly: false,
   zIndex: 1000
@@ -368,0 +392,0 @@ };

lib/DropTarget.js

@@ -26,6 +26,8 @@ 'use strict';
 
-  function DropTarget() {
+  function DropTarget(props) {
     _classCallCheck(this, DropTarget);
 
-    _get(Object.getPrototypeOf(DropTarget.prototype), 'constructor', this).apply(this, arguments);
+    _get(Object.getPrototypeOf(DropTarget.prototype), 'constructor', this).call(this, props);
+    this.elem = null;
+    this.handleDrop = this.handleDrop.bind(this);
   }
@@ -38,14 +40,37 @@
 
-      var elem = this.refs.drop_target;
-      elem.addEventListener(this.props.compatKey + 'DragEnter', function (e) {
+      this.elem = this.refs.drop_target;
+      this.elem.addEventListener(this.props.targetKey + 'DragEnter', function (e) {
         _this.props.onDragEnter(e);
       }, false);
-      elem.addEventListener(this.props.compatKey + 'DragLeave', function (e) {
+      this.elem.addEventListener(this.props.targetKey + 'DragLeave', function (e) {
         _this.props.onDragLeave(e);
       }, false);
-      elem.addEventListener(this.props.compatKey + 'Drop', function (e) {
-        _this.props.onDrop(e);
+      this.elem.addEventListener(this.props.targetKey + 'Drop', function (e) {
+        _this.handleDrop(e);
       }, false);
     }
   }, {
+    key: 'createEvent',
+    value: function createEvent(eventName, eventData) {
+      // utility to create an event
+      var e = undefined;
+      if (typeof window.CustomEvent !== 'function') {
+        // we are in IE 11 and must use old-style method of creating event
+        e = document.createEvent('CustomEvent');
+        e.initCustomEvent(eventName, true, true, {});
+      } else {
+        e = new CustomEvent(eventName, { 'bubbles': true, 'cancelable': true });
+      }
+      _extends(e, eventData);
+      return e;
+    }
+  }, {
+    key: 'handleDrop',
+    value: function handleDrop(e) {
+      // tell the drop source about the drop, then do the callback
+      var evt = this.createEvent(this.props.targetKey + 'Dropped', { dropElem: this.elem, dropData: this.props.dropData });
+      e.sourceElem.dispatchEvent(evt);
+      this.props.onDrop(e);
+    }
+  }, {
     key: 'render',
@@ -66,6 +91,7 @@ value: function render() {
   children: _react2['default'].PropTypes.any.isRequired,
-  compatKey: _react2['default'].PropTypes.string,
+  targetKey: _react2['default'].PropTypes.string,
   onDragEnter: _react2['default'].PropTypes.func,
   onDragLeave: _react2['default'].PropTypes.func,
   onDrop: _react2['default'].PropTypes.func,
+  dropData: _react2['default'].PropTypes.object,
   style: _react2['default'].PropTypes.object
@@ -75,3 +101,3 @@ };
 DropTarget.defaultProps = {
-  compatKey: 'ddc',
+  targetKey: 'ddc',
   onDragEnter: function onDragEnter() {
@@ -86,2 +112,3 @@ console.log('drag enter');
   },
+  dropData: {},
   style: {}
@@ -88,0 +115,0 @@ };

package.json

 {
   "name": "react-drag-drop-container",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "DragDropContainer",
@@ -16,16 +16,21 @@ "main": "lib/DragDropContainer.js",
   "dependencies": {
-    "classnames": "^2.1.2"
+    "classnames": "^2.2.5"
   },
   "devDependencies": {
-    "babel-eslint": "^4.1.3",
-    "eslint": "^1.6.0",
-    "eslint-plugin-react": "^3.5.1",
-    "gulp": "^3.9.0",
-    "react": "^0.14.0",
-    "react-component-gulp-tasks": "^0.7.6",
-    "react-dom": "^0.14.0"
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^7.1.1",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.23.0",
+    "enzyme": "^2.7.1",
+    "eslint": "^3.17.1",
+    "eslint-plugin-react": "^6.10.0",
+    "expect": "^1.20.2",
+    "gulp": "^3.9.1",
+    "mocha": "^3.2.0",
+    "react": "^15.4.2",
+    "react-addons-test-utils": "^15.4.2",
+    "react-component-gulp-tasks": "^0.7.7",
+    "react-dom": "^15.4.2"
   },
-  "peerDependencies": {
-    "react": "^0.14.0"
-  },
   "browserify-shim": {
@@ -40,4 +45,4 @@ "react": "global:React"
     "release": "NODE_ENV=production gulp release",
-    "start": "gulp dev",
-    "test": "echo \"no tests yet\" && exit 0",
+    "start": "export BABEL_ENV=production; gulp dev",
+    "test": "export BABEL_ENV=test; mocha --compilers js:babel-register --require babel-polyfill ./src/*.test.js",
     "watch": "gulp watch:lib"
@@ -44,0 +49,0 @@ },

README.md

@@ -10,11 +10,16 @@ # DragDropContainer and DropTarget
 
-* Can specify __compatKey__ string to to identify compatible drag elements 
+* Use property __targetKey__ to to identify compatible drag elements 
 and targets.
 
-* Can specify drag handle(s) with a className.
+* Can specify drag handle(s) (if desired) with property __dragHandleClassName__.
 
 * Can tell the element to return-to-base after dragging, or to stay where you put it.
 
-* Includes callback properties for __onStartDrag__, __onDragging__, and __onEndDrag__.
+* Can constrain dragging to one dimension, horizontal or vertical.
 
+* Includes callback properties for __onStartDrag__, __onDragging__,  __onEndDrag__,
+and __onDropped__. 
+ 
+* Data from the target element is included with the __onDropped__ event triggered in 
+the DragDropContainer.
 
@@ -59,3 +64,3 @@ ## Demo
 ```
-<DragDropContainer dragData={{'label': 'Example', 'id': 123}}>
+<DragDropContainer dragData={{label: 'Example', id: 123}}>
 	Example
@@ -65,5 +70,5 @@ </DragDropContainer>
 
-Specify compatKey. This determines what dropTargets will accept your drag:
+Specify targetKey. This determines what dropTargets will accept your drag:
 ```
-<DragDropContainer dragData={{'label': 'Example', 'id': 123}} compatKey="foo">
+<DragDropContainer dragData={{label: 'Example', id: 123}} targetKey="foo">
 	Example
@@ -76,5 +81,7 @@ </DragDropContainer>
 
-Wrap an element in a DropTarget, giving it the same compatKey as your draggable:
+Wrap an element in a DropTarget, giving it the same targetKey as your draggable:
 ```
-  <DropTarget compatKey="foo">[some other element or text]</DropTarget>
+  import { DropTarget } from 'react-drag-drop-container';
+
+  <DropTarget targetKey="foo">[some element or text]</DropTarget>
 ```
@@ -99,3 +106,3 @@
 ```
-  <DropTarget compatKey="foo" onDragEnter={this.highlight} onDragLeave={this.unHighlight} onDrop={this.dropped}>
+  <DropTarget targetKey="foo" onDragEnter={this.highlight} onDragLeave={this.unHighlight} onDrop={this.dropped}>
     <ChildElement highlighted=this.state.highlighted />
@@ -105,31 +112,9 @@ </DropTarget>
 
-### What is In the Event object?
-Here's the event object passed to the onDragEnter, onDragLeave, and onDrop callbacks:
-```
-{
-    dragData: [whatever you provided in the dragData property]
-    dragElem: [reference to the DOM element being dragged]
-    sourceElem: [reference to the DragDropContainer DOM element]
-}
-```
-The __sourceElem___ and __dragElem__ properties point to the same object unless you
-set __dragGhost__ (see below), in which case __dragElem__ is the ghost, and __sourceElem__
-is the DragDropContainer.
 
-#### Example: make the target "consume" the draggable?
-Use __event.sourceElem__ to hide or delete the source element after a successful
-drop.
-```
-  dropped(ev){
-      ev.sourceElem.style.visibility = 'hidden';
-  }
-```
+### DragDropContainer Properties
 
-
-### Properties
-
 ##### dragData
 Data about the dragged item that you want to pass to the target. Default is empty object.
 
-##### compatKey
+##### targetKey
 Optional string to specify which DropTargets will accept which DragDropContainers.
@@ -161,2 +146,4 @@
 
+##### xOnly, yOnly
+If true, then dragging is constrained to the x- or y direction, respectively.
 
@@ -182,4 +169,41 @@ ##### zIndex
 
+##### onDropped(dropData, dropTarget)
+Triggered after a drop onto a compatible DropTarget. __dropTarget__ is the DOM
+element of the DropTarget you dropped on, and  __dropData__ 
+is  an optional property of DropTarget. 
 
+### DropTarget Properties
 
+##### targetKey
+Optional string to specify which DragDropContainers this target will accept.
+
+##### dropData
+Data to be provided to the DragDropContainer when it is dropped on the target.
+
+#### Callbacks 
+
+All optional; specify in props.
+##### onDragEnter(e), onDragLeave(e), onDrop(e)
+The event e contains
+```
+{
+    dragData: [whatever you put in the dragData property for DragDropContainer]
+    dragElem: [reference to the DOM element being dragged]
+    sourceElem: [reference to the DragDropContainer DOM element]
+}
+```
+The __sourceElem___ and __dragElem__ properties point to the same object unless you
+set __dragGhost__ (see below), in which case __dragElem__ is the ghost, and __sourceElem__
+is the DragDropContainer.
+
+##### Example: make the target "consume" the draggable
+Use __event.sourceElem__ to hide or delete the source element after a successful
+drop.
+```
+  dropped(ev){
+      ev.sourceElem.style.visibility = 'hidden';
+  }
+```
+
+
 ## Development (`src`, `lib` and the build process)
@@ -186,0 +210,0 @@

src/DragDropContainer.js

@@ -33,2 +33,3 @@ import React from 'react';
     this.checkForOffsetChanges = this.checkForOffsetChanges.bind(this);
+    this.getChildrenWithDraggableFalse = this.getChildrenWithDraggableFalse.bind(this);
 
@@ -96,3 +97,3 @@ // The DOM elem we're dragging, and the elements we're dragging over.
     // generate events as we enter and leave elements while dragging
-    let prefix = this.props.compatKey;
+    let prefix = this.props.targetKey;
     this.setCurrentTarget(x, y);
@@ -109,3 +110,3 @@ if (this.currentTarget !== this.prevTarget) {
     this.setCurrentTarget(x, y);
-    this.currentTarget.dispatchEvent(this.createEvent(`${this.props.compatKey}Drop`, x, y));
+    this.currentTarget.dispatchEvent(this.createEvent(`${this.props.targetKey}Drop`, x, y));
   }
@@ -132,2 +133,3 @@
   startDrag(x, y){
+    document.addEventListener(`${this.props.targetKey}Dropped`, this.props.onDropped);
     this.setState({
@@ -166,7 +168,6 @@ clicked: true,
     let [dx, dy] = this.checkForOffsetChanges();
-    this.setState({
-      dragging: true,
-      left: dx + x - this.state.clickX,
-      top: dy + y - this.state.clickY
-    });
+    let stateChanges = {dragging: true};
+    if (!this.props.yOnly) {stateChanges['left'] = dx + x - this.state.clickX}
+    if (!this.props.xOnly) {stateChanges['top'] = dy + y - this.state.clickY}
+    this.setState(stateChanges);
     this.props.onDragging(this.props.dragData, this.currentTarget, x, y);
@@ -195,2 +196,3 @@ }
   drop(x, y){
+    // document.removeEventListener(`${this.props.targetKey}Dropped`, this.handleDrop);
     this.generateDropEvent(x, y);
@@ -218,2 +220,11 @@ if (this.props.returnToBase){
 
+  getChildrenWithDraggableFalse(){
+    // because otherwise can conflict with built-in browser dragging behavior
+    let inputReactObject = React.Children.only(this.props.children);
+    let clonedChild = React.cloneElement(inputReactObject, {
+      draggable: "false"
+    });
+    return clonedChild;
+  }
+
   render() {
@@ -240,3 +251,3 @@ let styles = {
       <div style={styles} ref="drag_container">
-        {this.props.children}
+        {this.getChildrenWithDraggableFalse()}
         {ghost}
@@ -252,3 +263,3 @@ </div>
   // Determines what you can drop on
-  compatKey: React.PropTypes.string,
+  targetKey: React.PropTypes.string,
 
@@ -268,2 +279,3 @@ // We will pass this to the target when you drag or drop over it
   // callbacks (optional):
+  onDropped: React.PropTypes.func,
   onDragging: React.PropTypes.func,
@@ -276,2 +288,6 @@ onEndDrag: React.PropTypes.func,
 
+  // Constrain dragging to the x or y directions only
+  xOnly: React.PropTypes.bool,
+  yOnly: React.PropTypes.bool,
+
   // Defaults to 1000 while dragging, but you can customize it
@@ -282,3 +298,3 @@ zIndex: React.PropTypes.number
 DragDropContainer.defaultProps = {
-  compatKey: 'ddc',
+  targetKey: 'ddc',
   dragData: {},
@@ -290,4 +306,7 @@ dragGhost: null,
   onEndDrag: () => {},
+  onDropped: () => {},
   noDragging: false,
   returnToBase: false,
+  xOnly: false,
+  yOnly: false,
   zIndex: 1000
@@ -294,0 +313,0 @@ };

src/DropTarget.js

 import React from 'react';
 
 class DropTarget extends React.Component {
+  constructor(props) {
+    super(props);
+    this.elem = null;
+    this.handleDrop = this.handleDrop.bind(this);
+  }
   componentDidMount() {
-    var elem = this.refs.drop_target;
-    elem.addEventListener(`${this.props.compatKey}DragEnter`, (e) => {this.props.onDragEnter(e);}, false);
-    elem.addEventListener(`${this.props.compatKey}DragLeave`, (e) => {this.props.onDragLeave(e);}, false);
-    elem.addEventListener(`${this.props.compatKey}Drop`, (e) => {this.props.onDrop(e);}, false);
+    this.elem = this.refs.drop_target;
+    this.elem.addEventListener(`${this.props.targetKey}DragEnter`, (e) => {this.props.onDragEnter(e);}, false);
+    this.elem.addEventListener(`${this.props.targetKey}DragLeave`, (e) => {this.props.onDragLeave(e);}, false);
+    this.elem.addEventListener(`${this.props.targetKey}Drop`, (e) => {this.handleDrop(e);}, false);
   }
 
+  createEvent(eventName, eventData) {
+    // utility to create an event
+    let e;
+    if (typeof window.CustomEvent !== 'function') {
+      // we are in IE 11 and must use old-style method of creating event
+      e = document.createEvent('CustomEvent');
+      e.initCustomEvent(eventName, true, true, {});
+    } else {
+      e = new CustomEvent(eventName, {'bubbles': true, 'cancelable': true});
+    }
+    Object.assign(e, eventData);
+    return e;
+  }
+
+  handleDrop(e){
+    // tell the drop source about the drop, then do the callback
+    let evt = this.createEvent(`${this.props.targetKey}Dropped`, {dropElem: this.elem, dropData: this.props.dropData});
+    e.sourceElem.dispatchEvent(evt);
+    this.props.onDrop(e)
+  }
+
   render() {
@@ -22,6 +48,7 @@ return (
   children: React.PropTypes.any.isRequired,
-  compatKey: React.PropTypes.string,
+  targetKey: React.PropTypes.string,
   onDragEnter: React.PropTypes.func,
   onDragLeave: React.PropTypes.func,
   onDrop: React.PropTypes.func,
+  dropData: React.PropTypes.object,
   style: React.PropTypes.object,
@@ -31,6 +58,7 @@ };
 DropTarget.defaultProps = {
-  compatKey: 'ddc',
+  targetKey: 'ddc',
   onDragEnter: () => {console.log('drag enter');},
   onDragLeave: () => {console.log('drag leave');},
   onDrop: () => {console.log('dropped!');},
+  dropData: {},
   style: {},
@@ -37,0 +65,0 @@ };

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

307890

increased by3.09%

Dependency count

1

decreased by-50%

Number of package files

32

increased by10.34%

Lines of code

1651

increased by11.25%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

213

increased by12.7%

Worsened metrics

Dev dependency count

15

increased by114.29%

Dependency changes

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedfbjs@0.6.1(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.14.10(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwhatwg-fetch@0.9.0(transitive)

• - Removedwrappy@1.0.2(transitive)

• Updatedclassnames@^2.2.5