Skip to content

akorchev/react-dnd-cross-frame

 
 

Repository files navigation

React Drag And Drop to IFrame

Based on the Single Target react-dnd demo.

Uses a patched version of react-dnd-html5-backend and a custom Frame component which passes the dragDropManager instance to the DropTarget that lives in the iframe.

@DragDropContext(HTML5Backend)
export default class App extends Component {
  render() {
    return (
      <div>
        <div style={{ overflow: 'hidden', clear: 'both' }}>
          <Frame>
            <Dustbin />
          </Frame>
        </div>
        <div style={{ overflow: 'hidden', clear: 'both' }}>
          <Box name='Glass' />
          <Box name='Banana' />
          <Box name='Paper' />
        </div>
      </div>
    );
  }
}
npm install
npm start
open http://localhost:3000

License

CC0 (public domain)

About

A demo showing drag and drop to iframe element

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 97.2%
  • HTML 2.8%