<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/MrHill/pen/BnyLx?limit=all&page=29&q=draggable" />
<link href='https://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<style class="cp-pen-styles">body{
background: #3e4649;
padding: 0;
margin: 0;
}
.frame{
position: absolute;
border: 1px solid #333;
background: #e7e7e7;
box-shadow: 0 1px 10px #111;
border-radius: 3px;
z-index: 10;
overflow: hidden;
}
.topbar{
border-radius: 3px 3px 0 0;
padding: 5px;
text-align: right;
cursor: default;
}
.xbtn, .maxbtn{
padding: 2px 4px;
text-align: center;
border-radius: 2px;
color: #333;
display: inline-block;
*display: inline;
zoom: 1.0;
vertical-align: top;
font-family: 'Days One', sans-serif;
font-size: 16px;
margin-top: -3px;
}
.swatches{
float: left;
background: #333;
}
.swatches span{
display: block;
float: left;
width: 10px;
height: 10px;
cursor: pointer;
margin: 5px;
}
.red{
background: #d23c31;
}
.orange{
background: #f27937;
}
.yellow{
background: #ffcc33;
}
.green{
background: #22a86d;
}
.blue{
background: #37a2d6;
}
.maxbtn span{
display: block;
border: 1px solid #333;
border-top: 2px solid #333;
width: 9px;
height: 8px;
margin-top: 6px;
}
.maxbtn:hover span, .maximized .maxbtn span{
border-color: #e7e7e7;
}
.xbtn:hover{
color: #e7e7e7;
}
.content{
height: auto;
width: auto;
padding: 15px;
}
.content>div{
width: inherit;
height: inherit;
}
.content>iframe{
width: inherit;
height: inherit;
}
textarea{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-appearance: none;
background: #e7e7e7;
color: #333;
font-size: 16px;
font-weight: normal;
font-family: 'Days One', sans-serif;
text-shadow: 0 1px 0 #fff;
resize: none;
}
.active{
z-index: 999999;
}
#video{
top: 10px;
left: 10px;
}
#website{
top: 10px;
left: 350px;
}
#custom{
top: 480px;
left: 350px;
}
#sticky{
top: 280px;
left: 10px;
}
#video .content{
width: 300px;
height: 200px;
}
#website .content{
width: 550px;
height: 400px;
right: 0;
}
#custom .content{
width: 550px;
height: 150px;
}
#sticky .content{
width: 300px;
height: 350px;
}
.frame.maximized{
top: 1% !important;
left: 1% !important;
width: 98% !important;
height: 98% !important;
-moz-transition: width .25s linear, height .25s linear, top .25s linear, left .25s linear;
-webkit-transition: width .25s linear, height .25s linear, top .25s linear, left .25s linear;
transition: width .25s linear, height .25s linear, top .25s linear, left .25s linear;
}
.frame.maximized .content{
margin: 0 auto !important;
width: 95% !important;
height: 95% !important;
-moz-transition: width .25s linear, height .25s linear, top .25s linear, left .25s linear;
-webkit-transition: width .25s linear, height .25s linear, top .25s linear, left .25s linear;
transition: width .25s linear, height .25s linear, top .25s linear, left .25s linear;
}</style></head><body>
<!-- Move windows around by grabbing and dragging the top bar. Change bar color with the swatches in the top left. Resize by dragging from the bottom, right side, or bottom right corner, or by clicking the maximize button in the to right. THANK YOU-->
<div class="frame" id="video">
<div class="topbar green">
<div class="swatches"><span class="red"></span><span class="orange"></span><span class="yellow"></span><span class="green"></span><span class="blue"></span></div>
<div class="maxbtn"><span></span></div>
<div class="xbtn">x</div>
</div>
<div class="content">
<iframe src="//www.youtube.com/embed/jcgnJkn87Dg?rel=0&wmode=transparent" frameborder="0" allowfullscreen ></iframe>
</div>
</div>
<div class="frame" id="website">
<div class="topbar orange">
<div class="swatches"><span class="red"></span><span class="orange"></span><span class="yellow"></span><span class="green"></span><span class="blue"></span></div>
<div class="maxbtn"><span></span></div>
<div class="xbtn">x</div>
</div>
<div class="content">
<iframe src="//www.webdesignerdepot.com/" frameborder="0"></iframe>
</div>
</div>
<div class="frame" id="custom">
<div class="topbar blue">
<div class="swatches"><span class="red"></span><span class="orange"></span><span class="yellow"></span><span class="green"></span><span class="blue"></span></div>
<div class="maxbtn"><span></span></div>
<div class="xbtn">x</div>
</div>
<div class="content">
<div class="custom-wrapper">
<h1>Custom Content</h1>
<h2>Hello!</h2>
</div>
</div>
</div>
<div class="frame" id="sticky">
<div class="topbar yellow">
<div class="swatches"><span class="red"></span><span class="orange"></span><span class="yellow"></span><span class="green"></span><span class="blue"></span></div>
<div class="maxbtn"><span></span></div>
<div class="xbtn">x</div>
</div>
<div class="content">
<div class="sticky-wrapper">
<textarea>Sticky Note Style. Type in me!</textarea>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script >$('.frame').mousedown(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
$('.frame').not(".maximized").resizable({
alsoResize: ".active .content",
minWidth: 200,
minHeight: 59
}).draggable({
handle: ".topbar"
});
//COLOR CHANGNG
$('.swatches span').click(function(){
var color = $(this).attr("class");
$(this).parent().parent().attr("class", "topbar").addClass(color);
});
//MAXIMIZED
$('.maxbtn').click(function(){
$(this).parent().parent().toggleClass("maximized");
});
//CLOSE
$('.xbtn').click(function(){
$(this).parent().parent().remove();
});
//# sourceURL=pen.js
</script>
</body></html>
