example.jsx

import preact, { h, render, Component } from 'preact'

class Page extends Component {

  componentDidMount() {
    $('.btn').draggable({ iframeFix: true, iframeScroll: true })
    $('.render').on('load', () => {
      $('.render').contents().find('[wf-droppable]').droppable({
        over: ({ target, toElement }) => $(target).css({ border: '2px solid #000000' }),
        out: ({ target, toElement }) => $(target).css({ border: 'none' }),
        drop: ({ target, toElement }) => console.log(target, toElement)
      })
    })
  }

  render({ template }) {
    return <iframe elevation="true" className="render" src={template}/>
  }

}

render((
  <div className="container-fluid">
    <div class="btn btn-default" style={{ 'z-index': '3000' }}>
      exemplo
    </div>
    <Page template="blank.html" />
  </div>
), document.body)