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

Comparing version 0.0.1 to 0.0.2

dist/react-drag-drop-container.js

@@ -6,18 +6,307 @@ (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){
 Object.defineProperty(exports, '__esModule', {
-	value: true
+  value: true
 });
-var React = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
 
-var DragDropContainer = React.createClass({
-	displayName: 'DragDropContainer',
+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; }; })();
 
-	render: function render() {
-		return React.createElement(
-			'div',
-			null,
-			'DragDropContainer'
-		);
-	}
-});
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _react = (typeof window !== "undefined" ? window['React'] : typeof global !== "undefined" ? global['React'] : null);
+
+var _react2 = _interopRequireDefault(_react);
+
+/**
+ * A container for dragging an element and dropping it on a target.
+ */
+
+var DragDropContainer = (function (_React$Component) {
+  _inherits(DragDropContainer, _React$Component);
+
+  function DragDropContainer(props) {
+    _classCallCheck(this, DragDropContainer);
+
+    _get(Object.getPrototypeOf(DragDropContainer.prototype), 'constructor', this).call(this, props);
+    this.state = {
+      'clickX': 0,
+      'clickY': 0,
+      'left': 0,
+      'top': 0,
+      'clicked': false,
+      'dragging': false,
+      'dragged': false
+    };
+
+    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);
+
+    // these are not set in state they do not involve re-rendering
+    this.dragElem = null;
+    this.currentTarget = null;
+    this.prevTarget = null;
+  }
+
+  _createClass(DragDropContainer, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.props.dragGhost) {
+        this.dragElem = this.refs['drag_ghost'].refs['the_ghost'];
+      } else {
+        this.dragElem = this.refs['drag_container'];
+      }
+    }
+  }, {
+    key: 'createEvent',
+    value: function createEvent(eventName, x, y) {
+      var _this = this;
+
+      var evt;
+      if (typeof window.CustomEvent !== 'function') {
+        // we are in IE 11 and must use old-style method of creating event
+        evt = document.createEvent('CustomEvent');
+        evt.initCustomEvent(eventName, true, true);
+      } else {
+        evt = new CustomEvent(eventName, { 'bubbles': true, 'cancelable': true });
+      }
+      // add stringified dragData to the event and make it accessible via html5-style method event.dataTransfer.getData()
+      var data = JSON.stringify(this.props.dragData);
+      evt.dataTransfer = {
+        'getData': function getData(arg) {
+          return arg === _this.props.dataKey ? data : undefined;
+        },
+        'types': [this.props.dataKey]
+      };
+      return evt;
+    }
+  }, {
+    key: 'setCurrentTarget',
+    value: function setCurrentTarget(x, y) {
+      // drop the z-index, figure out what element we're dragging over, then reset the z index
+      this.dragElem.style.zIndex = -1;
+      var target = document.elementFromPoint(x, y);
+      this.dragElem.style.zIndex = this.props.zIndex;
+      // prevent it from selecting itself as the target
+      this.currentTarget = this.dragElem.contains(target) ? document.body : target;
+    }
+  }, {
+    key: 'generateEnterLeaveEvents',
+    value: function generateEnterLeaveEvents(x, y) {
+      this.setCurrentTarget(x, y);
+      if (this.currentTarget !== this.prevTarget) {
+        if (this.prevTarget) {
+          this.prevTarget.dispatchEvent(this.createEvent(this.props.dragLeaveEventName, x, y));
+        }
+        if (this.currentTarget) {
+          this.currentTarget.dispatchEvent(this.createEvent(this.props.dragEnterEventName, x, y));
+        }
+      }
+      this.prevTarget = this.currentTarget;
+    }
+  }, {
+    key: 'generateDropEvent',
+    value: function generateDropEvent(x, y) {
+      this.setCurrentTarget(x, y);
+      this.currentTarget.dispatchEvent(this.createEvent(this.props.dropEventName, x, y));
+    }
+
+    // Start the Drag
+  }, {
+    key: 'handleMouseDown',
+    value: function handleMouseDown(e) {
+      e.preventDefault();
+      document.addEventListener("mousemove", this.handleMouseMove);
+      document.addEventListener("mouseup", this.handleMouseUp);
+      this.startDrag(e.clientX, e.clientY);
+    }
+  }, {
+    key: 'handleTouchStart',
+    value: function handleTouchStart(e) {
+      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 startDrag(x, y) {
+      this.setState({
+        'clicked': true,
+        'clickX': x - this.state.left,
+        'clickY': y - this.state.top
+      });
+      this.props.onStartDrag(this.props.dragData);
+    }
+
+    // Drag
+  }, {
+    key: 'handleMouseMove',
+    value: function handleMouseMove(e) {
+      e.preventDefault();
+      if (this.state.clicked) {
+        this.drag(e.clientX, e.clientY);
+      }
+    }
+  }, {
+    key: 'handleTouchMove',
+    value: function handleTouchMove(e) {
+      e.preventDefault();
+      if (this.state.clicked) {
+        this.drag(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
+      }
+    }
+  }, {
+    key: 'drag',
+    value: function drag(x, y) {
+      // drop the z-index, figure out what element we're dragging over, then reset the z index
+      this.generateEnterLeaveEvents(x, y);
+      this.setState({
+        dragging: true,
+        left: x - this.state.clickX,
+        top: y - this.state.clickY
+      });
+      this.props.onDragging(this.props.dragData, this.currentTarget, x, y);
+    }
+
+    // Drop
+  }, {
+    key: 'handleMouseUp',
+    value: function handleMouseUp(e) {
+      this.setState({ clicked: false });
+      if (this.state.dragging) {
+        document.removeEventListener("mousemove", this.handleMouseMove);
+        document.removeEventListener("mouseup", this.handleMouseUp);
+        this.drop(e.clientX, e.clientY);
+      }
+    }
+  }, {
+    key: 'handleTouchEnd',
+    value: function handleTouchEnd(e) {
+      this.setState({ clicked: false });
+      if (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 drop(x, y) {
+      this.generateDropEvent(x, y);
+      if (this.props.returnToBase) {
+        this.setState({ left: 0, top: 0, dragging: false });
+      } else {
+        this.setState({ dragged: true, dragging: false });
+      }
+      this.props.onEndDrag(this.props.dragData, this.currentTarget, x, y);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var styles = {
+        'position': 'relative'
+      };
+
+      var ghost = '';
+      if (this.props.dragGhost) {
+        // dragging will be applied to the "ghost" element
+        ghost = _react2['default'].createElement(
+          DragDropGhost,
+          { dragging: this.state.dragging, left: this.state.left, top: this.state.top, zIndex: this.props.zIndex, ref: 'drag_ghost' },
+          this.props.dragGhost
+        );
+      } else {
+        // dragging will be applied to the DragDropContainer itself
+        styles['left'] = this.state.left;
+        styles['top'] = this.state.top;
+        styles['zIndex'] = this.state.dragging || this.state.dragged ? this.props.zIndex : 'inherit';
+      }
+      return _react2['default'].createElement(
+        'div',
+        { style: styles, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, ref: 'drag_container' },
+        this.props.children,
+        ghost
+      );
+    }
+  }]);
+
+  return DragDropContainer;
+})(_react2['default'].Component);
+
+DragDropContainer.propTypes = {
+  // callbacks (optional):
+  onStartDrag: _react2['default'].PropTypes.func,
+  onDragging: _react2['default'].PropTypes.func,
+  onEndDrag: _react2['default'].PropTypes.func,
+  // We will pass a stringified version of this object to the target when you drag or drop over it
+  dragData: _react2['default'].PropTypes.object.isRequired,
+  // The key that the target will use to retrieve dragData from the event with event.dataTransfer.getData([dataKey])
+  dataKey: _react2['default'].PropTypes.string,
+  // If false, then object will not return to its starting point after you let go of it
+  returnToBase: _react2['default'].PropTypes.bool,
+  // If provided, we'll drag this instead of the actual object
+  dragGhost: _react2['default'].PropTypes.node,
+  // You can customize these to make it easy for your target to spot the events it's interested in
+  dragEnterEventName: _react2['default'].PropTypes.string,
+  dragLeaveEventName: _react2['default'].PropTypes.string,
+  dropEventName: _react2['default'].PropTypes.string,
+  // Defaults to 1000 while dragging, but you can customize it
+  zIndex: _react2['default'].PropTypes.number
+};
+
+DragDropContainer.defaultProps = {
+  onStartDrag: function onStartDrag() {},
+  onDragging: function onDragging() {},
+  onEndDrag: function onEndDrag() {},
+  dataKey: 'data',
+  returnToBase: true,
+  dragEnterEventName: 'dragEnter',
+  dragLeaveEventName: 'dragLeave',
+  dropEventName: 'drop',
+  zIndex: 1000
+};
+
+var DragDropGhost = (function (_React$Component2) {
+  _inherits(DragDropGhost, _React$Component2);
+
+  function DragDropGhost() {
+    _classCallCheck(this, DragDropGhost);
+
+    _get(Object.getPrototypeOf(DragDropGhost.prototype), 'constructor', this).apply(this, arguments);
+  }
+
+  _createClass(DragDropGhost, [{
+    key: 'render',
+    value: function render() {
+      var styles = {
+        'position': 'absolute',
+        'zIndex': this.props.zIndex,
+        'left': this.props.left,
+        'top': this.props.top,
+        'display': this.props.dragging ? 'block' : 'none'
+      };
+      return _react2['default'].createElement(
+        'div',
+        { style: styles, ref: 'the_ghost' },
+        this.props.children
+      );
+    }
+  }]);
+
+  return DragDropGhost;
+})(_react2['default'].Component);
+
 exports['default'] = DragDropContainer;
@@ -24,0 +313,0 @@ module.exports = exports['default'];

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 n;n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,n.DragDropContainer=e()}}(function(){return function e(n,o,t){function r(i,u){if(!o[i]){if(!n[i]){var d="function"==typeof require&&require;if(!u&&d)return d(i,!0);if(f)return f(i,!0);var l=new Error("Cannot find module '"+i+"'");throw l.code="MODULE_NOT_FOUND",l}var a=o[i]={exports:{}};n[i][0].call(a.exports,function(e){var o=n[i][1][e];return r(o?o:e)},a,a.exports,e,n,o,t)}return o[i].exports}for(var f="function"==typeof require&&require,i=0;i<t.length;i++)r(t[i]);return r}({1:[function(e,n,o){(function(e){"use strict";Object.defineProperty(o,"__esModule",{value:!0});var t="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,r=t.createClass({displayName:"DragDropContainer",render:function(){return t.createElement("div",null,"DragDropContainer")}});o["default"]=r,n.exports=o["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(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 h=n[i]={exports:{}};t[i][0].call(h.exports,function(e){var n=t[i][1][e];return o(n?n:e)},h,h.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(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),h=function(e){function t(e){o(this,t),s(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 a(t,e),i(t,[{key:"componentDidMount",value:function(){this.props.dragGhost?this.dragElem=this.refs.drag_ghost.refs.the_ghost:this.dragElem=this.refs.drag_container}},{key:"createEvent",value:function(e,t,n){var r,o=this;"function"!=typeof window.CustomEvent?(r=document.createEvent("CustomEvent"),r.initCustomEvent(e,!0,!0)):r=new CustomEvent(e,{bubbles:!0,cancelable:!0});var a=JSON.stringify(this.props.dragData);return r.dataTransfer={getData:function(e){return e===o.props.dataKey?a:void 0},types:[this.props.dataKey]},r}},{key:"setCurrentTarget",value:function(e,t){this.dragElem.style.zIndex=-1;var n=document.elementFromPoint(e,t);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.dragLeaveEventName,e,t)),this.currentTarget&&this.currentTarget.dispatchEvent(this.createEvent(this.props.dragEnterEventName,e,t))),this.prevTarget=this.currentTarget}},{key:"generateDropEvent",value:function(e,t){this.setCurrentTarget(e,t),this.currentTarget.dispatchEvent(this.createEvent(this.props.dropEventName,e,t))}},{key:"handleMouseDown",value:function(e){e.preventDefault(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),this.startDrag(e.clientX,e.clientY)}},{key:"handleTouchStart",value:function(e){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}),this.props.onStartDrag(this.props.dragData)}},{key:"handleMouseMove",value:function(e){e.preventDefault(),this.state.clicked&&this.drag(e.clientX,e.clientY)}},{key:"handleTouchMove",value:function(e){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=d["default"].createElement(l,{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"),d["default"].createElement("div",{style:e,onMouseDown:this.handleMouseDown,onTouchStart:this.handleTouchStart,ref:"drag_container"},this.props.children,t)}}]),t}(d["default"].Component);h.propTypes={onStartDrag:d["default"].PropTypes.func,onDragging:d["default"].PropTypes.func,onEndDrag:d["default"].PropTypes.func,dragData:d["default"].PropTypes.object.isRequired,dataKey:d["default"].PropTypes.string,returnToBase:d["default"].PropTypes.bool,dragGhost:d["default"].PropTypes.node,dragEnterEventName:d["default"].PropTypes.string,dragLeaveEventName:d["default"].PropTypes.string,dropEventName:d["default"].PropTypes.string,zIndex:d["default"].PropTypes.number},h.defaultProps={onStartDrag:function(){},onDragging:function(){},onEndDrag:function(){},dataKey:"data",returnToBase:!0,dragEnterEventName:"dragEnter",dragLeaveEventName:"dragLeave",dropEventName:"drop",zIndex:1e3};var 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);n["default"]=h,t.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

example/src/example.js

 var React = require('react');
 var ReactDOM = require('react-dom');
 var DragDropContainer = require('react-drag-drop-container');
+import Gorilla from './Gorilla';
 
@@ -9,3 +10,42 @@ var App = React.createClass({
 			<div>
-				<DragDropContainer />
+				<div style={{ 'float': 'left' }}>
+					<DragDropContainer 
+						dataKey="food_data" 
+						dragData={{'label': 'banana', 'tastes': 'yummy', 'domId': 'mybanana'}}
+					>
+						<img id="mybanana" src="img/banana.png"/>
+					</DragDropContainer>
+					
+					<DragDropContainer 
+						dataKey="food_data" 
+						dragData={{'label': 'orange', 'tastes': 'yummy', 'domId': 'myorange'}}
+					>
+						<img id="myorange" src="img/orange.png"/>
+					</DragDropContainer>
+					
+					<DragDropContainer
+						dataKey="food_data"
+						dragData={{'label': 'pickle', 'tastes': 'bad', 'domId': 'mypickle'}}
+					>
+						<img id="mypickle" src="img/pickle.png"/>
+					</DragDropContainer>
+					
+					<br/><br/>
+					
+					<DragDropContainer
+						dataKey="food_data"
+						dragData={{'label': 'surprise', 'tastes': 'ok'}}
+						dragGhost={<img id="surprise" src="img/surprise.png"/>}
+					>
+						<h2>Surprise!</h2>
+					</DragDropContainer>
+					
+					<br/><br/><br/>
+				</div>
+
+				<DragDropContainer returnToBase={false}>
+					<Gorilla />
+				</DragDropContainer>
+				
+				
 			</div>
@@ -12,0 +52,0 @@ );

lib/DragDropContainer.js

 'use strict';
 
 Object.defineProperty(exports, '__esModule', {
-	value: true
+  value: true
 });
-var React = require('react');
 
-var DragDropContainer = React.createClass({
-	displayName: 'DragDropContainer',
+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; }; })();
 
-	render: function render() {
-		return React.createElement(
-			'div',
-			null,
-			'DragDropContainer'
-		);
-	}
-});
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+/**
+ * A container for dragging an element and dropping it on a target.
+ */
+
+var DragDropContainer = (function (_React$Component) {
+  _inherits(DragDropContainer, _React$Component);
+
+  function DragDropContainer(props) {
+    _classCallCheck(this, DragDropContainer);
+
+    _get(Object.getPrototypeOf(DragDropContainer.prototype), 'constructor', this).call(this, props);
+    this.state = {
+      'clickX': 0,
+      'clickY': 0,
+      'left': 0,
+      'top': 0,
+      'clicked': false,
+      'dragging': false,
+      'dragged': false
+    };
+
+    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);
+
+    // these are not set in state they do not involve re-rendering
+    this.dragElem = null;
+    this.currentTarget = null;
+    this.prevTarget = null;
+  }
+
+  _createClass(DragDropContainer, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.props.dragGhost) {
+        this.dragElem = this.refs['drag_ghost'].refs['the_ghost'];
+      } else {
+        this.dragElem = this.refs['drag_container'];
+      }
+    }
+  }, {
+    key: 'createEvent',
+    value: function createEvent(eventName, x, y) {
+      var _this = this;
+
+      var evt;
+      if (typeof window.CustomEvent !== 'function') {
+        // we are in IE 11 and must use old-style method of creating event
+        evt = document.createEvent('CustomEvent');
+        evt.initCustomEvent(eventName, true, true);
+      } else {
+        evt = new CustomEvent(eventName, { 'bubbles': true, 'cancelable': true });
+      }
+      // add stringified dragData to the event and make it accessible via html5-style method event.dataTransfer.getData()
+      var data = JSON.stringify(this.props.dragData);
+      evt.dataTransfer = {
+        'getData': function getData(arg) {
+          return arg === _this.props.dataKey ? data : undefined;
+        },
+        'types': [this.props.dataKey]
+      };
+      return evt;
+    }
+  }, {
+    key: 'setCurrentTarget',
+    value: function setCurrentTarget(x, y) {
+      // drop the z-index, figure out what element we're dragging over, then reset the z index
+      this.dragElem.style.zIndex = -1;
+      var target = document.elementFromPoint(x, y);
+      this.dragElem.style.zIndex = this.props.zIndex;
+      // prevent it from selecting itself as the target
+      this.currentTarget = this.dragElem.contains(target) ? document.body : target;
+    }
+  }, {
+    key: 'generateEnterLeaveEvents',
+    value: function generateEnterLeaveEvents(x, y) {
+      this.setCurrentTarget(x, y);
+      if (this.currentTarget !== this.prevTarget) {
+        if (this.prevTarget) {
+          this.prevTarget.dispatchEvent(this.createEvent(this.props.dragLeaveEventName, x, y));
+        }
+        if (this.currentTarget) {
+          this.currentTarget.dispatchEvent(this.createEvent(this.props.dragEnterEventName, x, y));
+        }
+      }
+      this.prevTarget = this.currentTarget;
+    }
+  }, {
+    key: 'generateDropEvent',
+    value: function generateDropEvent(x, y) {
+      this.setCurrentTarget(x, y);
+      this.currentTarget.dispatchEvent(this.createEvent(this.props.dropEventName, x, y));
+    }
+
+    // Start the Drag
+  }, {
+    key: 'handleMouseDown',
+    value: function handleMouseDown(e) {
+      e.preventDefault();
+      document.addEventListener("mousemove", this.handleMouseMove);
+      document.addEventListener("mouseup", this.handleMouseUp);
+      this.startDrag(e.clientX, e.clientY);
+    }
+  }, {
+    key: 'handleTouchStart',
+    value: function handleTouchStart(e) {
+      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 startDrag(x, y) {
+      this.setState({
+        'clicked': true,
+        'clickX': x - this.state.left,
+        'clickY': y - this.state.top
+      });
+      this.props.onStartDrag(this.props.dragData);
+    }
+
+    // Drag
+  }, {
+    key: 'handleMouseMove',
+    value: function handleMouseMove(e) {
+      e.preventDefault();
+      if (this.state.clicked) {
+        this.drag(e.clientX, e.clientY);
+      }
+    }
+  }, {
+    key: 'handleTouchMove',
+    value: function handleTouchMove(e) {
+      e.preventDefault();
+      if (this.state.clicked) {
+        this.drag(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
+      }
+    }
+  }, {
+    key: 'drag',
+    value: function drag(x, y) {
+      // drop the z-index, figure out what element we're dragging over, then reset the z index
+      this.generateEnterLeaveEvents(x, y);
+      this.setState({
+        dragging: true,
+        left: x - this.state.clickX,
+        top: y - this.state.clickY
+      });
+      this.props.onDragging(this.props.dragData, this.currentTarget, x, y);
+    }
+
+    // Drop
+  }, {
+    key: 'handleMouseUp',
+    value: function handleMouseUp(e) {
+      this.setState({ clicked: false });
+      if (this.state.dragging) {
+        document.removeEventListener("mousemove", this.handleMouseMove);
+        document.removeEventListener("mouseup", this.handleMouseUp);
+        this.drop(e.clientX, e.clientY);
+      }
+    }
+  }, {
+    key: 'handleTouchEnd',
+    value: function handleTouchEnd(e) {
+      this.setState({ clicked: false });
+      if (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 drop(x, y) {
+      this.generateDropEvent(x, y);
+      if (this.props.returnToBase) {
+        this.setState({ left: 0, top: 0, dragging: false });
+      } else {
+        this.setState({ dragged: true, dragging: false });
+      }
+      this.props.onEndDrag(this.props.dragData, this.currentTarget, x, y);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var styles = {
+        'position': 'relative'
+      };
+
+      var ghost = '';
+      if (this.props.dragGhost) {
+        // dragging will be applied to the "ghost" element
+        ghost = _react2['default'].createElement(
+          DragDropGhost,
+          { dragging: this.state.dragging, left: this.state.left, top: this.state.top, zIndex: this.props.zIndex, ref: 'drag_ghost' },
+          this.props.dragGhost
+        );
+      } else {
+        // dragging will be applied to the DragDropContainer itself
+        styles['left'] = this.state.left;
+        styles['top'] = this.state.top;
+        styles['zIndex'] = this.state.dragging || this.state.dragged ? this.props.zIndex : 'inherit';
+      }
+      return _react2['default'].createElement(
+        'div',
+        { style: styles, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart, ref: 'drag_container' },
+        this.props.children,
+        ghost
+      );
+    }
+  }]);
+
+  return DragDropContainer;
+})(_react2['default'].Component);
+
+DragDropContainer.propTypes = {
+  // callbacks (optional):
+  onStartDrag: _react2['default'].PropTypes.func,
+  onDragging: _react2['default'].PropTypes.func,
+  onEndDrag: _react2['default'].PropTypes.func,
+  // We will pass a stringified version of this object to the target when you drag or drop over it
+  dragData: _react2['default'].PropTypes.object.isRequired,
+  // The key that the target will use to retrieve dragData from the event with event.dataTransfer.getData([dataKey])
+  dataKey: _react2['default'].PropTypes.string,
+  // If false, then object will not return to its starting point after you let go of it
+  returnToBase: _react2['default'].PropTypes.bool,
+  // If provided, we'll drag this instead of the actual object
+  dragGhost: _react2['default'].PropTypes.node,
+  // You can customize these to make it easy for your target to spot the events it's interested in
+  dragEnterEventName: _react2['default'].PropTypes.string,
+  dragLeaveEventName: _react2['default'].PropTypes.string,
+  dropEventName: _react2['default'].PropTypes.string,
+  // Defaults to 1000 while dragging, but you can customize it
+  zIndex: _react2['default'].PropTypes.number
+};
+
+DragDropContainer.defaultProps = {
+  onStartDrag: function onStartDrag() {},
+  onDragging: function onDragging() {},
+  onEndDrag: function onEndDrag() {},
+  dataKey: 'data',
+  returnToBase: true,
+  dragEnterEventName: 'dragEnter',
+  dragLeaveEventName: 'dragLeave',
+  dropEventName: 'drop',
+  zIndex: 1000
+};
+
+var DragDropGhost = (function (_React$Component2) {
+  _inherits(DragDropGhost, _React$Component2);
+
+  function DragDropGhost() {
+    _classCallCheck(this, DragDropGhost);
+
+    _get(Object.getPrototypeOf(DragDropGhost.prototype), 'constructor', this).apply(this, arguments);
+  }
+
+  _createClass(DragDropGhost, [{
+    key: 'render',
+    value: function render() {
+      var styles = {
+        'position': 'absolute',
+        'zIndex': this.props.zIndex,
+        'left': this.props.left,
+        'top': this.props.top,
+        'display': this.props.dragging ? 'block' : 'none'
+      };
+      return _react2['default'].createElement(
+        'div',
+        { style: styles, ref: 'the_ghost' },
+        this.props.children
+      );
+    }
+  }]);
+
+  return DragDropGhost;
+})(_react2['default'].Component);
+
 exports['default'] = DragDropContainer;
 module.exports = exports['default'];

package.json

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

src/DragDropContainer.js

@@ -1,9 +0,244 @@
-var React = require('react');
+import React from 'react';
+/**
+ * A container for dragging an element and dropping it on a target.
+ */
 
-var DragDropContainer = React.createClass({
-	render () {
-		return <div>DragDropContainer</div>;
-	}
-});
+class DragDropContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      'clickX': 0,
+      'clickY': 0,
+      'left': 0,
+      'top': 0,
+      'clicked': false,
+      'dragging': false,
+      'dragged': false
+    };
 
+    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);
+
+    // these are not set in state they do not involve re-rendering
+    this.dragElem = null;
+    this.currentTarget = null;
+    this.prevTarget = null;
+  }
+
+  componentDidMount() {
+    if (this.props.dragGhost) {
+      this.dragElem = this.refs['drag_ghost'].refs['the_ghost'];
+    } else {
+      this.dragElem = this.refs['drag_container'];
+    }
+  }
+
+  createEvent(eventName, x, y) {
+    var evt;
+    if (typeof window.CustomEvent !== 'function') {
+      // we are in IE 11 and must use old-style method of creating event
+      evt = document.createEvent('CustomEvent');
+      evt.initCustomEvent(eventName, true, true);
+    } else {
+      evt = new CustomEvent(eventName, {'bubbles': true, 'cancelable': true});
+    }
+    // add stringified dragData to the event and make it accessible via html5-style method event.dataTransfer.getData()
+    var data = JSON.stringify(this.props.dragData);
+    evt.dataTransfer = {
+      'getData': (arg)=>{return arg === this.props.dataKey ? data : undefined},
+			'types': [this.props.dataKey]
+    };
+    return evt
+  }
+
+  setCurrentTarget(x, y) {
+    // drop the z-index, figure out what element we're dragging over, then reset the z index
+    this.dragElem.style.zIndex = -1;
+    var target = document.elementFromPoint(x, y);
+    this.dragElem.style.zIndex = this.props.zIndex;
+    // prevent it from selecting itself as the target
+    this.currentTarget = this.dragElem.contains(target) ? document.body : target;
+  }
+
+  generateEnterLeaveEvents(x, y) {
+    this.setCurrentTarget(x, y);
+    if (this.currentTarget !== this.prevTarget) {
+      if (this.prevTarget) {this.prevTarget.dispatchEvent(this.createEvent(this.props.dragLeaveEventName, x, y));}
+      if (this.currentTarget) {this.currentTarget.dispatchEvent(this.createEvent(this.props.dragEnterEventName, x, y))}
+    }
+    this.prevTarget = this.currentTarget;
+  }
+
+  generateDropEvent(x, y) {
+    this.setCurrentTarget(x, y);
+    this.currentTarget.dispatchEvent(this.createEvent(this.props.dropEventName, x, y));
+  }
+
+  // Start the Drag
+  handleMouseDown(e) {
+    e.preventDefault();
+    document.addEventListener("mousemove", this.handleMouseMove);
+    document.addEventListener("mouseup", this.handleMouseUp);
+    this.startDrag(e.clientX, e.clientY);
+  }
+
+  handleTouchStart(e){
+    e.preventDefault();
+    document.addEventListener("touchmove", this.handleTouchMove);
+    document.addEventListener("touchend", this.handleTouchEnd);
+    this.startDrag(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
+  }
+
+  startDrag(x, y){
+    this.setState({
+      'clicked': true,
+      'clickX': x - this.state.left,
+      'clickY': y - this.state.top
+    });
+    this.props.onStartDrag(this.props.dragData);
+  }
+
+  // Drag
+  handleMouseMove(e) {
+    e.preventDefault();
+    if (this.state.clicked){
+      this.drag(e.clientX, e.clientY)
+    }
+  }
+
+  handleTouchMove(e) {
+    e.preventDefault();
+    if (this.state.clicked){
+      this.drag(e.targetTouches[0].pageX, e.targetTouches[0].pageY)
+    }
+  }
+
+  drag (x, y){
+    // drop the z-index, figure out what element we're dragging over, then reset the z index
+    this.generateEnterLeaveEvents(x, y);
+    this.setState({
+      dragging: true,
+      left: x - this.state.clickX,
+      top: y - this.state.clickY
+    });
+    this.props.onDragging(this.props.dragData, this.currentTarget, x, y);
+  }
+
+  // Drop
+  handleMouseUp(e) {
+    this.setState({clicked: false});
+    if (this.state.dragging){
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      this.drop(e.clientX, e.clientY);
+    }
+  }
+
+  handleTouchEnd(e) {
+    this.setState({clicked: false});
+    if (this.state.dragging){
+      document.removeEventListener("touchmove", this.handleTouchMove);
+      document.removeEventListener("touchend", this.handleTouchEnd);
+      this.drop(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+    }
+  }
+
+  drop(x, y){
+    this.generateDropEvent(x, y);
+    if (this.props.returnToBase){
+      this.setState({left: 0, top: 0, dragging: false});
+    } else {
+      this.setState({dragged: true, dragging: false})
+    }
+    this.props.onEndDrag(this.props.dragData, this.currentTarget, x, y);
+  }
+
+  render() {
+    var styles = {
+      'position': 'relative'
+    };
+
+    var ghost = '';
+    if (this.props.dragGhost){
+      // dragging will be applied to the "ghost" element
+      ghost = (
+        <DragDropGhost dragging={this.state.dragging} left={this.state.left} top={this.state.top} zIndex={this.props.zIndex} ref="drag_ghost">
+          {this.props.dragGhost}
+        </DragDropGhost>
+      )
+    } else {
+      // dragging will be applied to the DragDropContainer itself
+      styles['left'] = this.state.left;
+      styles['top'] = this.state.top;
+      styles['zIndex'] = this.state.dragging || this.state.dragged ? (this.props.zIndex) : 'inherit';
+    }
+    return (
+      <div style={styles} onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart} ref="drag_container">
+        {this.props.children}
+        {ghost}
+      </div>
+    );
+  }
+}
+
+DragDropContainer.propTypes = {
+  // callbacks (optional):
+  onStartDrag: React.PropTypes.func,
+  onDragging: React.PropTypes.func,
+  onEndDrag: React.PropTypes.func,
+  // We will pass a stringified version of this object to the target when you drag or drop over it
+  dragData: React.PropTypes.object.isRequired,
+  // The key that the target will use to retrieve dragData from the event with event.dataTransfer.getData([dataKey])
+  dataKey: React.PropTypes.string,
+  // If false, then object will not return to its starting point after you let go of it
+  returnToBase: React.PropTypes.bool,
+  // If provided, we'll drag this instead of the actual object
+  dragGhost: React.PropTypes.node,
+  // You can customize these to make it easy for your target to spot the events it's interested in
+  dragEnterEventName: React.PropTypes.string,
+  dragLeaveEventName: React.PropTypes.string,
+  dropEventName: React.PropTypes.string,
+  // Defaults to 1000 while dragging, but you can customize it
+  zIndex: React.PropTypes.number
+};
+
+DragDropContainer.defaultProps = {
+  onStartDrag: () => {},
+  onDragging: () => {},
+  onEndDrag: function(){},
+  dataKey: 'data',
+  returnToBase: true,
+  dragEnterEventName: 'dragEnter',
+  dragLeaveEventName: 'dragLeave',
+  dropEventName: 'drop',
+  zIndex: 1000
+};
+
+class DragDropGhost extends React.Component {
+  render() {
+    var styles = {
+      'position': 'absolute',
+      'zIndex': this.props.zIndex,
+      'left': this.props.left,
+      'top': this.props.top,
+      'display': this.props.dragging ? 'block' : 'none'
+    };
+    return (
+      <div style={styles} ref="the_ghost">
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+
 export default DragDropContainer;

New alerts

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49960

increased by370.03%

Number of package files

17

increased by6.25%

Lines of code

947

increased by657.6%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes