diff --git a/package.json b/package.json
index b7aab2b3..33b35349 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
"pre-commit": "^1.1.3",
"react": "^15.2.1",
"react-dom": "^15.2.1",
+ "react-frame-component": "0.6.2",
"semver": "^5.3.0",
"static-server": "^2.0.3",
"uglify-js": "^2.7.0",
diff --git a/specs/draggable.spec.jsx b/specs/draggable.spec.jsx
index d871c600..6484e90a 100644
--- a/specs/draggable.spec.jsx
+++ b/specs/draggable.spec.jsx
@@ -3,6 +3,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react/lib/ReactTestUtils';
import Draggable, {DraggableCore} from '../index';
+import FrameComponent from 'react-frame-component';
import assert from 'power-assert';
import _ from 'lodash';
import {getPrefix, browserPrefixToKey, browserPrefixToStyle} from '../lib/utils/getPrefix';
@@ -289,7 +290,7 @@ describe('react-draggable', function () {
});
it('should detect if an element is instanceof SVGElement and set state.isElementSVG to true', function() {
- drag = TestUtils.renderIntoDocument(
+ drag = TestUtils.renderIntoDocument(
@@ -299,7 +300,7 @@ describe('react-draggable', function () {
});
it('should detect if an element is NOT an instanceof SVGElement and set state.isElementSVG to false', function() {
- drag = TestUtils.renderIntoDocument(
+ drag = TestUtils.renderIntoDocument(
@@ -374,6 +375,60 @@ describe('react-draggable', function () {
TestUtils.Simulate.mouseUp(node);
assert(document.body.getAttribute('style') === '');
});
+
+ it('should be draggable when in an iframe', function (done) {
+ let dragged = false;
+ const dragElement = (
+
+
+
+ );
+ const renderRoot = document.body.appendChild(document.createElement('div'));
+ const frame = ReactDOM.render({ dragElement }, renderRoot);
+
+ setTimeout(() => {
+ const body = ReactDOM.findDOMNode(frame).contentDocument.body;
+ const node = body.querySelector('.react-draggable');
+ simulateMovementFromTo(node, 0, 0, 100, 100);
+
+ const style = node.getAttribute('style');
+ assert(dragged === true);
+ assert(style.indexOf('transform: translate(100px, 100px);') >= 0);
+
+ renderRoot.parentNode.removeChild(renderRoot);
+ done();
+ }, 50);
+ });
+
+ it('should add and remove user-select styles to iframe’s body when in an iframe', function (done) {
+ const userSelectStyleStr = `;${userSelectStyle}: none;`;
+
+ const dragElement = (
+
+
+
+ );
+ const renderRoot = document.body.appendChild(document.createElement('div'));
+ const frame = ReactDOM.render({ dragElement }, renderRoot);
+
+ setTimeout(() => {
+ const iframeDoc = ReactDOM.findDOMNode(frame).contentDocument;
+ const node = iframeDoc.querySelector('.react-draggable');
+ iframeDoc.body.setAttribute('style', '');
+
+ assert(iframeDoc.body.getAttribute('style') === '');
+ assert(document.body.getAttribute('style') === '');
+ TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
+ assert(iframeDoc.body.getAttribute('style') === userSelectStyleStr);
+ assert(document.body.getAttribute('style') === '');
+ TestUtils.Simulate.mouseUp(node);
+ assert(iframeDoc.body.getAttribute('style') === '');
+ assert(document.body.getAttribute('style') === '');
+
+ renderRoot.parentNode.removeChild(renderRoot);
+ done();
+ }, 50);
+ });
});
describe('interaction', function () {
@@ -477,7 +532,7 @@ describe('react-draggable', function () {
let dragCalled = false;
function onDrag(e, coreEvent) {
- assert(coreEvent.deltaY === 500);
+ assert(Math.round(coreEvent.deltaY) === 500);
dragCalled = true;
}
drag = TestUtils.renderIntoDocument();
@@ -642,11 +697,12 @@ function renderToNode(component) {
// but attaches event listeners directly to the document.
// Would love to new MouseEvent() here but it doesn't work with PhantomJS / old browsers.
// var e = new MouseEvent('mousemove', {clientX: 100, clientY: 100});
-function mouseMove(x, y) {
- const evt = document.createEvent('MouseEvents');
+function mouseMove(x, y, node) {
+ const doc = node ? node.ownerDocument : document;
+ const evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('mousemove', true, true, window,
0, 0, 0, x, y, false, false, false, false, 0, null);
- document.dispatchEvent(evt);
+ doc.dispatchEvent(evt);
return evt;
}
@@ -655,7 +711,7 @@ function simulateMovementFromTo(drag, fromX, fromY, toX, toY) {
const node = ReactDOM.findDOMNode(drag);
TestUtils.Simulate.mouseDown(node, {clientX: fromX, clientY: fromX});
- mouseMove(toX, toY);
+ mouseMove(toX, toY, node);
TestUtils.Simulate.mouseUp(node);
}