diff --git a/lib/draggable.js b/lib/draggable.js index 25d242c6..9e476cff 100644 --- a/lib/draggable.js +++ b/lib/draggable.js @@ -504,12 +504,13 @@ module.exports = React.createClass({ onStart: emptyFunction, onDrag: emptyFunction, onStop: emptyFunction, - onMouseDown: emptyFunction, + onMouseDown: emptyFunction }; }, getInitialState: function (props) { // Handle call from CWRP + var currentState = this.state; props = props || this.props; return { // Whether or not we are currently dragging. @@ -521,9 +522,10 @@ module.exports = React.createClass({ // Current transform x and y. clientX: props.start.x, clientY: props.start.y, - // Can only determine if is SVG after mounted - isElementSVG: false - + // Determines if the element is an svg or not. Default to false. + isElementSVG: currentState && currentState.isElementSVG !== undefined ? + currentState.isElementSVG : + false }; }, @@ -682,7 +684,7 @@ module.exports = React.createClass({ // If the item you are dragging already has a transform set, wrap it in a so // has a clean slate. var transform = this.state.isElementSVG ? null : - createCSSTransform({ + createCSSTransform({ // Set left if horizontal drag is enabled x: canDragX(this) ? this.state.clientX : @@ -695,6 +697,8 @@ module.exports = React.createClass({ }); + // This is primarily for IE as it ignores the CSS transform applied above + // and only respects the real transform attribute. var svgTransform = !this.state.isElementSVG ? null : createSVGTransform({ // Set left if horizontal drag is enabled diff --git a/specs/draggable.spec.js b/specs/draggable.spec.js index 4dc5d8d4..8809750f 100644 --- a/specs/draggable.spec.js +++ b/specs/draggable.spec.js @@ -108,7 +108,7 @@ describe('react-draggable', function () { var style = node.getAttribute('style'); expect(style.indexOf('transform: translate(100px, 100px);')).not.toEqual(-1); - + }); it('should detect if an element is instanceof SVGElement and set state.isElementSVG to true', function() { @@ -150,7 +150,7 @@ describe('react-draggable', function () { var transform = node.getAttribute('transform'); expect(transform.indexOf('translate(100,100)')).not.toEqual(-1); - + });