HTML, CSS and JavaScript playground

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Drawing Application</title>
    <link href="shape.css" rel="stylesheet">
    <link href="css/ruler.css" rel="stylesheet">
    <script src="shape.js"></script>
    <script type="text/javascript" src="src/rulers.js"></script>

<style>

.ruler {
            position: absolute;
            top:142px; left:22px;;
            width: 93.9%; height: 25px;
            background: #eee; color: #000;
            font-family: arial;
            font-size: 12px; line-height: 14px;
            border-bottom: 1px solid;
        }
        .ruler > div {
            display: inline-block;
            background: #000;
        }
        .ruler .tickLabel {
            position:relative;
            top: -10px;
            margin-left: 4px;
            width: 1px;
            height: 100%;
            text-indent: 1px;
            line-height: 20px;
        }
        .ruler .tickLabel:first-of-type {
            margin-left: 0px;
        }
        .ruler .tickMajor {
            margin-top: 19px;
            margin-left: 4px;
            width: 1px;
            height: 6px;
        }
        .ruler .tickMinor {
            margin-left: 4px;
            width: 1px;
            height: 4px;
        }

.top {
            z-index: 2;
            position: relative
        }

.bottom {
            z-index: 1;
            position: relative
        }

.col {
            float: left;
            padding: 5px 5px 5px 5px;
            margin: 5px 5px 5px 5px;
        }

#col1 {
            width: 500px;
            height: 820px;
            border: 1px solid #CCC;
            float: left;

}

.drag {
            position: relative;
            background-size: contain !important;
            background-repeat: no-repeat;
        }

table {

}

.switch {
            width: 214px;
            max-height: 100px;
            overflow-y: scroll;
        }

.drag:hover {
            opacity: 0.6;
            filter: alpha(opacity=40); /* For IE8 and earlier */

}

#droppable {
            width: 1280px;
            height: 490px;
            border: 1px solid #CCC;
            margin-top: 25px;
        }

#droppable .drag {
            width: 200px;
            height: 220px;
            border: none;
        }

#droppable .drag img {
            width: 100%;
            height: 100%;
            z-index: 0;
        }

.drag2 {
            -moz-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            -webkit-transform: scaleY(-1);
            transform: scaleY(-1);
            filter: FlipV;
            -ms-filter: "FlipV";
        }

.new-class {

width: 200px;
            height: 220px;
            background-size: 200px;
            border: solid 4px #666;
        }

.ui-resizable-handle {
            width: 10px;
            height: 10px;
            background-color: #ffffff;
            border: 1px solid #000000;

}

.ui-resizable-n {
            top: -10px;
            left: 50%;
            width: 6px;
            height: 6px;

}

.ui-resizable-e {
            right: -10px;
            top: 50%;
            width: 6px;
            height: 6px;
        }

.ui-resizable-s {
            bottom: -10px;
            left: 50%;
            width: 6px;
            height: 6px;
        }

.ui-resizable-w {
            left: -10px;
            top: 50%;
            width: 6px;
            height: 6px;
        }

.ui-resizable-nw {
            left: -10px;
            top: -10px;
            width: 6px;
            height: 6px;
        }

.ui-resizable-ne {
            top: -10px;
            right: -10px;
            width: 6px;
            height: 6px;
        }

.ui-resizable-sw {
            bottom: -10px;
            left: -10px;
            width: 6px;
            height: 6px;
        }

.ui-resizable-se {
            bottom: -10px;
            right: -10px;
            width: 6px;
            height: 6px;
        }

.ui-resizable-helper {
            border: 1px dotted #CCC;
        }

.toolsTop {
            background-color: #CCC;
            opacity: 0.6;
            filter: alpha(opacity=40);
            width: 70%;
            height: 50px;
            float: right;
            display: none;

}

#container {
            background: url(image/white.jpg)
        }
    </style>

</script>

</head>

var x = null;

//Make element draggable
        $(".drag").draggable({

helper: 'clone',
            cursor: 'move',
            tolerance: 'fit',
            stack: '.drag',
            revert: "invalid"

});

$("#droppable").droppable({

drop: function (e, ui) {

if ($(ui.draggable)[0].id !== "") {
                    x = ui.helper.clone();
                    ui.helper.remove();

x.draggable({

//helper: 'original',
                        containment: '#droppable',
                        tolerance: 'fit',
                        stack: '.drag'

});

x.resizable({

animate: true,
                        //aspectRatio: 16 / 9,

helper: "ui-resizable-helper",
                        handles: "n, e, s, w, nw, ne, sw,se"

});
                    x.appendTo('#droppable');

}

}
        });

});

$(document).click(function (e) {
        // matches all children of droppable, change selector as needed
        if ($(e.target).closest(".drag").length > 0) {
            $(e.target).closest(".drag").find(".ui-resizable-handle").show();
            $("#tools").show();
        }
        else {
            $("#droppable").find(".ui-resizable-handle").hide();
            $("#tools").hide();
        }
    });

$(window).on('load resize', function() {
        $('.ruler').empty();
        createRuler();
    });

</script>

<div id="menu2">
    <span style="color:white; margin-bottom:-20px; z-index:3; font-family:Montserrat; font-size:11px; margin-top: 5px; position:absolute; margin-left:5px;">Download</span>

<div id="menu3">
    <span style="color:white; margin-bottom:-20px; z-index:3; font-family:Montserrat; font-size:11px; margin-top: 5px; position:absolute; margin-left:17px;">Print</span>

<div id="func">
<span style="font-family:Montserrat; font-size:13px; margin-left:10px;">Switches</span>
<span style="font-family:Montserrat; font-size:13px; margin-left:170px;">Telephony</span>

</div>

</div>

</body>

</footer>

</html>

.ruler {
    position: absolute;
    margin-top: -8px;
    margin-left: -8px;
    z-index: -1;
    border: white;
    background-image: url('image/drawBack.PNG');
    background-repeat: repeat-x;

}

body {
    overflow: hidden;
    background-color: white;
}

#container
{

margin-top: 50px;
    margin-left: 50px;
    border: white;

}

#func ul li
{
    display: inline;
    list-style-type: none;
    margin-right: 60px;
    margin-left:-45px;

}

#shape ul li
{
    display: inline;
    list-style-type: none;
    margin-right: 100px;
    margin-left:-45px;

}

.btnSave
{
    margin-top:-715px;
    padding: 3px;

}

.btnshape
{
    margin-top:-715px;
    padding: 3px;
}

.btnSave:hover
{

}

#menu
{
    background: #B4BA22;
    border-radius: 1px;
    width: 6%;
    height:100%;
    position: absolute;
    z-index: 3;
    margin-left: 1290px;
    margin-top:-12px;
    border: white;
}

#menu2
{
    background: #B4BA22;
    border-radius: 1px;
    width: 6%;
    height:100%;
    position: absolute;
    z-index: 3;
    margin-left: 1290px;
    margin-top:154px;
    border: white;
}

#menu3
{
    background: #B4BA22;
    border-radius: 1px;
    width: 6%;
    height:100%;
    position: absolute;
    z-index: 3;
    margin-left: 1290px;
    margin-top:240px;
    border: white;
}

#menu4
{
    background: #B4BA22;
    border-radius: 1px;
    width: 6%;
    height:100%;
    position: absolute;
    z-index: 3;
    margin-left: 1290px;
    margin-top:325px;
    border: white;
}

#menu_button {
    background-color: whitesmoke;
    box-shadow: 0px 1px 3px 0px #000, 0px -2px 0px 0px rgba(0, 0, 0, 0.3) inset;
}

#menu_button:hover {
    background-color: white;
    cursor: pointer;
}

#menu_button1 {
    background-color: whitesmoke;
    box-shadow: 0px 1px 3px 0px #000, 0px -2px 0px 0px rgba(0, 0, 0, 0.3) inset;
}

#menu_button1:hover {
    background-color: white;
    cursor: pointer;
}

#menu_button2 {
    background-color: whitesmoke;
    box-shadow: 0px 1px 3px 0px #000, 0px -2px 0px 0px rgba(0, 0, 0, 0.3) inset;
}

#menu_button2:hover {
    background-color: white;
    cursor: pointer;
}

#menu_button3 {
    background-color: whitesmoke;
    box-shadow: 0px 1px 3px 0px #000, 0px -2px 0px 0px rgba(0, 0, 0, 0.3) inset;
}

#menu_button3:hover {
    background-color: white;
    cursor: pointer;
}

#menu_button4 {
    background-color: whitesmoke;
    box-shadow: 0px 1px 3px 0px #000, 0px -2px 0px 0px rgba(0, 0, 0, 0.3) inset;
}

#menu_button4:hover {
    background-color: white;
    cursor: pointer;
}

#menu_content {
    border: 1pt solid gray;
    border-radius: 6px;
    position: fixed;
    margin-top:0px;
    margin-left: -255px;
    width: 245px;
    box-shadow: 0px 1px 3px 0px gray, 0px -2px 0px 0px rgba(0, 0, 0, 0.3) inset;
    opacity: 1;
    height: 200px;
    overflow: hidden;
    background: white;

transition: opacity .5s, width .5s;
}

/* This defines the menu state when it's hidden
   You could use the class to change the color, icon, etc. as well.
*/
#menu.menu_hidden #menu_content {
    width: 0;
    opacity: 0;
}

#menu1
{
    background: #B4BA22;
    border-radius: 1px;
    width: 6%;
    height:100%;
    position: absolute;
    z-index: 3;
    margin-left: 1290px;
    margin-top:70px;
    border: white;
}

.img1
{
    width:50px;
}

#menu_content1 {
    border: 1pt solid gray;
    position: fixed;
    border-radius: 6px;
    margin-top:10px;
    margin-left: -270px;
    width: 240px;
    box-shadow: 0px 1px 3px 0px gray, 0px -2px 0px 0px rgba(0, 0, 0, 0.3) inset;
    opacity: 1;
    height: 20%;
    overflow-y: scroll;
    background: white;
    /* Let's add some animated transitions */
    transition: opacity .5s, width .5s;
}

/* This defines the menu state when it's hidden
   You could use the class to change the color, icon, etc. as well.
*/
#menu1.menu_hidden1 #menu_content1 {
    width: 0;
    opacity: 0;
}

#menu_content2 {
    border: 1pt solid gray;
    position: fixed;
    border-radius: 6px;
    margin-top:10px;
    margin-left: -270px;
    width: 240px;
    box-shadow: 0px 1px 3px 0px gray, 0px -2px 0px 0px rgba(0, 0, 0, 0.3) inset;
    opacity: 1;
    height: 20%;
    overflow-y: scroll;
    background: white;
    /* Let's add some animated transitions */
    transition: opacity .5s, width .5s;
}

/* This defines the menu state when it's hidden
   You could use the class to change the color, icon, etc. as well.
*/
#menu2.menu_hidden2 #menu_content2 {
    width: 0;
    opacity: 0;
}

/*
footer
{
    width: 94%;
    overflow: hidden;
    height: 3%;
    background: whitesmoke;
    opacity:0;
    border-top-style: ridge;
    border-top-color: black;
    margin-top: 600px;
    margin-left:6px;
    z-index: 4;
    position: absolute;
}

footer:hover
{
    opacity: 10;
}*/