JSFiddle - React, Tailwind, and code Playground

by jbalsas

HTML

<div class="demo">
    <div class="yui-hd"><span>Ooops...</span>

    </div>
    <div class="yui-bd">Dragging resets radio buttons
        <input type="radio" name="test" checked></input>
        <input type="radio" name="test"></input>
    </div>
</div>

CSS

.demo {
    position:relative;
    width:22em;
    border: 1px solid #9EA8C6;
    background: #ECEFFB;
    border-radius: 3px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
    text-align: center;
}

JavaScript

YUI().use('dd-drag', 'dd-proxy', function (Y) {
    var dd = new Y.DD.Drag({
        node: '.demo',
        opacity: 0.2
    });

    Y.Plugin.DDProxy.prototype.clone = function() {
        var host = this.get('host'),
            n = host.get('node'),
            c = n.cloneNode(true);

        c.all('input[type="radio"]').removeAttribute('name');
        
        delete c._yuid;
        c.setAttribute('id', Y.guid());
        c.setStyle('position', 'absolute');
        n.get('parentNode').appendChild(c);
        host.set('dragNode', c);
        return c;
    }
    
    dd.plug(Y.Plugin.DDProxy, {
        cloneNode: true
    });
});