JSFiddle - React, Tailwind, and code Playground

by marclundgren

HTML

<link rel="stylesheet" href="http://cdn.alloyui.com/2.0.0pr6/aui-css/css/bootstrap.css">
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<body>
     <h1>YUI 3.6.0 - Resize vs Resize Proxy Test</h1>

    <div id="wrapper">
        <div id="main-content">
            <div id="demoNode1" class="boundary">
                <div class="body">
                    <header class="topper">
                         <h4 class="title">
                            Resize
                        </h4>

                    </header>
                </div>
            </div>
            <div id="demoNode2" class="boundary">
                <div class="body">
                    <header class="topper">
                         <h4 class="title">
                            Resize with ResizeProxy
                        </h4>

                    </header>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

#demoNode1 {
    top: 75px;
}
#wrapper {
    margin-left: 20px;
}
.boundary {
    border-collapse: collapse;
    display: block;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: 180px;
    line-height: 15px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: absolute;
    width: 400px;
    zoom: 1;
    top: 300px;
    border: 1px solid;
    position: absolute;
}
.topper {
    border: 1px dashed;
}
.body {
    border-collapse: collapse;
    display: block;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 15px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    zoom: 1;
}
.topper:hover {
    cursor: move;
}

JavaScript

YUI({
    filter: 'raw'
}).use('dd-delegate', 'dd-proxy', 'resize', 'resize-plugin', function (Y) {

    var dd = new Y.DD.Delegate({
        container: '#main-content',
        nodes: '.boundary',
        handles: ['.topper']
    });

    var demoNode1 = Y.one('#demoNode1');
    var demoNode2 = Y.one('#demoNode2');

    var resize1 = new Y.Resize({
        handles: 'r,br,b',
        node: demoNode1
    });

    var resize2 = new Y.Resize({
        handles: 'r,br,b',
        node: demoNode2
    });

    resize2.plug(Y.Plugin.ResizeProxy);
});