react-pointer-draggable/dist/react-draggable.min.js

React draggable component with pointer events

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React")):"function"==typeof define&&define.amd?define(["React"],e):"object"==typeof exports?exports.ReactDraggable=e(require("React")):t.ReactDraggable=e(t.React)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var s=n[o]={exports:{},id:o,loaded:!1};return t[o].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function o(t,e){if(!e)return t;e=String(e);var n=!!~e.indexOf("top"),o=!!~e.indexOf("right"),s=!!~e.indexOf("bottom"),r=!!~e.indexOf("left"),i=!!~e.indexOf("all")||!(n||o||s||r),a=!~e.indexOf("point");return t.boundTop=i||n,t.boundRight=i||o,t.boundBottom=i||s,t.boundLeft=i||r,t.boundBox=a,t}function s(t){return{position:{top:t.state.offsetTop,left:t.state.offsetLeft}}}function r(t){return"both"===t.props.axis||"y"===t.props.axis}function i(t){return"both"===t.props.axis||"x"===t.props.axis}function a(t){return"function"==typeof t||"[object Function]"===Object.prototype.toString.call(t)}function f(t,e){for(var n=0,o=(t.length,null);o=t[n];n++)if(e.apply(e,[o,n,t]))return o}function p(t,e){var n=f(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],function(e){return a(t[e])});return t[n].call(t,e)}function c(t){var e=t.touches&&t.touches[0]||t;return{clientX:e.clientX,clientY:e.clientY}}function u(t,e,n){t&&(t.attachEvent?t.attachEvent("on"+e,n):t.addEventListener?t.addEventListener(e,n,!0):t["on"+e]=n)}function h(t,e,n){t&&(t.detachEvent?t.detachEvent("on"+e,n):t.removeEventListener?t.removeEventListener(e,n,!0):t["on"+e]=null)}var l,d=n(1),g=function(){},v="undefined"!=typeof window?window:this;"undefined"!=typeof document&&"body"in document&&(l=document.body);var x="ontouchstart"in v||"onmsgesturechange"in v,b=function(){var t={touch:{start:"touchstart",move:"touchmove",end:"touchend"},mouse:{start:"mousedown",move:"mousemove",end:"mouseup"}};return t[x?"touch":"mouse"]}();t.exports=d.createClass({displayName:"Draggable",mixins:[d.addons.PureRenderMixin],propTypes:{axis:d.PropTypes.oneOf(["both","x","y"]),handle:d.PropTypes.string,cancel:d.PropTypes.string,bound:d.PropTypes.string,grid:d.PropTypes.arrayOf(d.PropTypes.number),constrain:d.PropTypes.func,start:d.PropTypes.object,zIndex:d.PropTypes.number,useChild:d.PropTypes.bool,onStart:d.PropTypes.func,onDrag:d.PropTypes.func,onStop:d.PropTypes.func,onMouseDown:d.PropTypes.func},getDefaultProps:function(){return{axis:"both",bound:null,handle:null,cancel:null,grid:null,start:{},zIndex:0/0,useChild:!0,onStart:g,onDrag:g,onStop:g,onMouseDown:g}},getInitialState:function(){var t={dragging:!1,clientX:0,clientY:0,offsetLeft:this.props.start.x||0,offsetTop:this.props.start.y||0};return o(t,this.props.bound),t},componentWillReceiveProps:function(t){var e=o({},t.bound);t.start&&(null!=t.start.x&&(e.offsetLeft=t.start.x||0),null!=t.start.y&&(e.offsetTop=t.start.y||0)),this.setState(e)},componentWillUnmount:function(){h(v,b.move,this.handleDrag),h(v,b.end,this.handleDragEnd)},handleDragStart:function(t){if(this.props.onMouseDown(t),!(this.props.handle&&!p(t.target,this.props.handle)||this.props.cancel&&p(t.target,this.props.cancel))){var e=c(t);this.setState({dragging:!0,clientX:e.clientX,clientY:e.clientY}),this.props.onStart(t,s(this)),u(v,b.move,this.handleDrag),u(v,b.end,this.handleDragEnd),l&&(l.className+=" react-draggable-dragging")}},handleDragEnd:function(t){if(this.state.dragging&&(this.setState({dragging:!1}),this.props.onStop(t,s(this)),h(v,b.move,this.handleDrag),h(v,b.end,this.handleDragEnd),l)){var e=l.className;l.className=e.replace(/(?:^|\s+)react-draggable-dragging\b/," ")}},handleDrag:function(t){var e,n,o=c(t),a=this._toPixels(this.state.offsetLeft),f=this._toPixels(this.state.offsetTop),p={offsetLeft:a,offsetTop:f},u=this.getDOMNode(),h=u.offsetParent;i(this)&&(e=a+o.clientX-this.state.clientX,this.state.boundLeft&&(n=p.offsetLeft-u.offsetLeft,n>e&&(e=n)),this.state.boundRight&&(n+=h.clientWidth,this.state.boundBox&&(n-=u.offsetWidth),e>n&&(e=n)),p.offsetLeft=e),r(this)&&(e=f+o.clientY-this.state.clientY,this.state.boundTop&&(n=p.offsetTop-u.offsetTop,n>e&&(e=n)),this.state.boundBottom&&(n+=h.clientHeight,this.state.boundBox&&(n-=u.offsetHeight),e>n&&(e=n)),p.offsetTop=e);var l=this.props.constrain,d=this.props.grid;if(!l&&Array.isArray(d)){var g=function(t,e,n){var o=t-e;return Math.abs(o)>=n?e+parseInt(o/n,10)*n:e};l=function(t){return{left:g(t.left,t.prevLeft,d[0]),top:g(t.top,t.prevTop,d[1])}}}var v;l&&(v=l({prevLeft:this.state.offsetLeft,prevTop:this.state.offsetTop,left:p.offsetLeft,top:p.offsetTop}),v&&("left"in v&&!isNaN(v.left)&&(p.offsetLeft=v.left),"top"in v&&!isNaN(v.top)&&(p.offsetTop=v.top))),p.clientX=this.state.clientX+(p.offsetLeft-a),p.clientY=this.state.clientY+(p.offsetTop-f),this.setState(p),this.props.onDrag(t,s(this))},onTouchStart:function(t){return t.preventDefault(),this.handleDragStart.apply(this,arguments)},render:function(){var t={top:this.state.offsetTop,left:this.state.offsetLeft};this.state.dragging&&!isNaN(this.props.zIndex)&&(t.zIndex=this.props.zIndex);var e={style:t,className:"react-draggable",onMouseDown:this.handleDragStart,onTouchStart:this.onTouchStart,onMouseUp:this.handleDragEnd,onTouchEnd:this.handleDragEnd};return this.props.useChild?d.addons.cloneWithProps(d.Children.only(this.props.children),e):d.DOM.div(e,this.props.children)},_toPixels:function(t){if("string"==typeof t&&"%"==t.slice(-1))return parseInt(+t.replace("%","")/100*this.getDOMNode().offsetParent.clientWidth,10)||0;var e=parseInt(t,10);return isNaN(e)||!isFinite(e)?0:e}})},function(e){e.exports=t}])});
//# sourceMappingURL=react-draggable.min.js.map