<style>
    #demo {
        height: 100px;
        width: 100px;
        border: 1px solid black;
        cursor: move;
        float: right;
    }
    #ifrm {
        width: 400px;
        height: 300px;
    }
</style>

<p>Try dragging the proxy element over the iframe below, in most browsers this will not happen. Now click the `Turn Shim On` button and drag again. Now you can drag over the iframe.</p>

<p>You can see the shim by clicking the `Turn Debugging On` button while using the shim, the default for this example is that the shim is off.</p>

<p><button id="shim" value="off">Turn Shim On</button> <button id="debugShim" value="off" disabled>Turn Debugging On</button></p>

<div id="demo">Drag Me</div>

<iframe id="ifrm" src="{{componentAssets}}/blank.htm"></iframe>

<script>
{{>shim-drag-source-js}}
</script>
