JSFiddle - React, Tailwind, and code Playground

by merganser

HTML

<link rel="stylesheet" href="http://greenethumb.com/github/jquery-free-transform/css/jquery.freetrans.css">
<script src="http://greenethumb.com/github/jquery-free-transform/js/Matrix.js"></script>
<script src="http://greenethumb.com/github/jquery-free-transform/js/jquery.freetrans.js"></script>
<div id="navigation"> <a href='/' class='logo'>Sample SVG</a>

    <nav> <a href="/nav1">Nav1</a>
 <a href="/nav2">Nav2</a>

    </nav>
</div>
<div id="chart">  
        <g class="item transform">
            <div class="temp"></div>
            <embed class="svg googlefile" src="http://www.w3schools.com/svg/circle1.svg" type="image/svg+xml" />        
            <text class="text">Users</text>
            <input type="text" class="textinput" value="Users" />
        </g>
</div>
<div id="toolbar" class="classroom" style="display:;">
    <ul>
        <li>
   
            <g class="newitem">
            <div class="temp"></div>
            <embed class="svg googlefile" src="http://www.w3schools.com/svg/circle1.svg" type="image/svg+xml" />        
            <text class="text">Users</text>
            <input type="text" class="textinput" value="Users" />
        </g>
        </li>
    </ul>
</div>

CSS

.ft-control{z-index:3;}
.temp{z-index:2;
    width:100px;
    height:100px;
    display:block;
    color:blue;
    cursor:move;
    position:absolute;
}
.item{
    display:block;
    position:relative;
    width:100px;
    height:100px;
    border:1px solid white;
    background-color:blue;
}
.transform {
    cursor:move;
}
embed.googlefile{margin:0 0 0 -50px;border:1px dotted black;}
.svg{width:150px;height:100px;z-index:1;position:;}




div#navigation {
    width:100%;
    height:32px;
    background-color:#eee;
    padding:4px;
}
a.logo {
    background:transparent url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToU5O7rMmIiYT0BVUPTpbd4d73cdMhRI8XsYCTInDcmCtuQpOh") no-repeat 0 0;
    width:32px;
    height:32px;
    display:block;
    overflow:hidden;
    text-indent:-9999px;
}
nav {
    display:none;
}
div#toolbar {
    position:absolute;
    top:40px;
    left:-80px;
    bottom:0px;
    width:120px;
    background-color:#999;
    transition: left 1s;
    -moz-transition: left 1s;
    /* Firefox 4 */
    -webkit-transition: left 1s;
    /* Safari and Chrome */
    -o-transition: left 1s;
    /* Opera */
}
div#toolbar:hover {
    left:0px;
}
div#chart {
    position:absolute;
    top:40px;
    left:40px;
    bottom:0px;
    right:0px;
    background-color:green;
}
#MainGroup {
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    width:120px;
    height:120px;
    background-color:#eee;
    border:1px solid black;
}
#UserIcon {
    background:transparent url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToU5O7rMmIiYT0BVUPTpbd4d73cdMhRI8XsYCTInDcmCtuQpOh") no-repeat 0 0;
    width:32px;
    height:32px;
    display:block;
}
#SubGroup {
    border:1px solid green;
    padding:5px;
    position:relative;
    float:left;
}
text.text {
    
    color:#fff;
    font-weight:bold;
}
input.textinput {
    display:none;
    position:absolute;
    bottom:0px;
    left:0px;
}

JavaScript

function ShowToolbar() {
    $("#toolbar").animate({
        left: "0px"
    }, "fast");
}

function HideToolbar() {
    $("#toolbar").animate({
        left: "-80px"
    }, "fast");

}

$(document).ready(function () {
    $("text.text").click(function () {
        if ($('input.textinput').is(':visible')) {
            $("input.textinput").show();
        } else {
            
            $("input.textinput").hide();
        }
    });
    

    $('.transform').freetrans();
    $('.transform').freetrans('controls', false);

    $('#toolbar li svg').click(function () {
        $(".transform").freetrans('controls', false);

        $("#chart").append("<div class='newitem'>" + $('#toolbar li').html() + "</div>");
        $("#chart div.newitem").addClass("transform");
        $("#chart div.newitem").freetrans();
        $("#chart div.newitem").freetrans('controls', true);
        $("#chart div.newitem").removeClass("newitem");
    });


    $(".transform").live("click", function () {
        $(".transform").freetrans('controls', false);
        $(this).freetrans('controls', true);
    });


    /*var timer;
    $("#toolbar").mouseover(function () {
        timer=window.setInterval(ShowToolbar,300);
    });
    
    $("#toolbar").mouseout(function () {
        window.clearInterval(timer);
        window.setInterval(HideToolbar,100);
        
    });*/

});