Skip to content

Instantly share code, notes, and snippets.

@davidascher
Created August 7, 2013 05:36
Show Gist options
  • Select an option

  • Save davidascher/6171486 to your computer and use it in GitHub Desktop.

Select an option

Save davidascher/6171486 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div.span1, div.span2, div.span3, div.span4, div.span5 {
background-color: orange;
float: left;
height: 30px;
}
div.break {
border: 1px dashed black;
height: 2px;
width: 100%;
}
#preview {
border: 1px solid black;
background: none ;
}
.Display480p {
width: 480px;
height: 800px;
}
.Display720p {
width: 720px;
height: 1280px;
}
.span1 {
width: 20%;
}
.span2 {
width: 40%;
}
.span3 {
width: 60%;
}
.span4 {
width: 80%;
}
.span5 {
width: 100%;
}
.break {
clear:both;
}
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>
</head>
<body>
<div id="preview" class="Display480p">
<div class="span1"></div>
<div class="span2"></div>
<div class="break"></div>
<div class="span1"></div>
<div class="span4"></div>
<div class="span2"></div>
<div class="break"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span2"></div>
<div class="break"></div>
<div class="span1"></div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("#preview").sortable({
placeholder: "ui-state-highlight"
});
$("#preview").disableSelection();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment