JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>
    <div id="drag">
        Drag me
    </div>
</div>
<br/>
<iframe id="frame" src="/DQdZ9/12/show/"></iframe>

CSS

#drag {
    width:50px;
    height:50px;
    background:green;
}

JavaScript

YUI().use( 'node', 'dd-drop', 'dd-proxy', function(Y) {

    // DRAG TARGETS       
    var drag = new Y.DD.Drag({
    
        node: Y.one('#drag')
        
    }).plug( Y.Plugin.DDProxy, {
    
        moveOnEnd: false
    
    });
    
    // DRAG EVENTS
    drag.on( 'drag:start', function () {
    
        var p = this.get( 'dragNode' );
        
        p.setStyle( 'opacity', .65 );
        
    });
    
    drag.on( 'drag:enter', function (e) {
    
        e.drop.get('node').addClass('hover');
    
    });

    drag.on( 'drag:exit', function (e) {
    
        e.drop.get('node').removeClass('hover');
    
    });
    
    drag.on( 'drag:end', function (e) {
        e.preventDefault()
    });


    // DROP TARGETS            
    var drop = new Y.DD.Drop({
            
        node: jQuery( '#frame' ).contents().find( '#drop' )[0]
            
    });
    
});