<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="NavPlaceHolder"> <div id="NavLeft" class="NavItem"> <div class="NavItem"> <div class="dropdown"> <button id="NavMenuButton" class="btn btn-primary btn-menu toggle" type="button"> <a id="MenuToogleButton" class="glyphicon glyphicon-th-list btn-menu toggle"> <i class="fa fa-bars"></i> </a> </button> </div> </div> <div class="NavItem"> </div> </div> <div id="NavCenter" class="NavItem"> </div> <div id="NavRight" class="NavItem"> <div id="login" class="NavItem"> <label>User:</label><input type="text" id="LogUser"> <label>Password:</label> <input type="password" id="LogPassword"> <button class="BlueButton">Login</button> </div> </div> </div> <div id="BodyPlaceHolder" class="container-fluid"> <h1>Small Grid</h1> <p>The following example will result in a 25%/75% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-sm-3" style="background-color:yellow;"> <fieldset class="scheduler-border"> <legend class="scheduler-border">Resources</legend> <div class="control-group"> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </div> </fieldset> </div> <div class="col-sm-3" style="background-color:pink;"> <fieldset class="scheduler-border"> <legend class="scheduler-border">Canvas</legend> <div class="control-group" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> </fieldset> </div> <div class="col-sm-3" style="background-color:cyan;"> <fieldset class="scheduler-border"> <legend class="scheduler-border">Projects</legend> <div class="control-group" > </div> </fieldset> </div> </div> </div>

/*Body*/ .control-group { width: 100%; height: 100px; padding: 10px; border: 2px solid #aaaaaa; } #BodyPlaceHolder{ position: absolute; top:50px; width:100% } #div2 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } /*Navigation*/ #NavPlaceHolder{ height:50px; display:block; background-color: #2F4350; width: 100%; z-index: 10; position:fixed; } .NavItem{ display: inline-block; vertical-align: top; } #NavRight{ position:absolute; right:0px; } #login { height: 100%; color: white; padding: 10px; } /*Buttons*/ #MenuToogleButton{ color:white; font-size:20px; } #NavMenuButton { display: block; vertical-align: middle; border-width: 0; margin: 0; padding: 0; min-width: 50px; height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; line-height: normal; overflow: visible; cursor: pointer; outline-offset: -1px; background-color:#005C8A; } .BlueButton{ background-color: #005C8A; font-weight: bold; } /*Inputs*/ input{ color:black; }

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } /*Menu-toggle*/ $("#NavMenuButton").click(function(e) { console.log('1'); e.preventDefault(); $("#wrapper").toggleClass("active"); });