Dynamic HTML UI Builder

Sample HTML to build a HTML interface using drag/drop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://bootswatch.com/slate/bootstrap.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<ul class="widgets col-sm-2">
    <li class="col-xs-6" data-type="grid-row" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/grid_row.png); background-repeat: no-repeat;" data-html='<div class="row"><div class="col-md-4 target"><h3>Span 4</h3><p>Content</p></div><div class="col-md-4 target"><h3>Span 4</h3><p>Content</p></div><div class="col-md-4 target"><h3>Span 4</h3><p>Content</p></div></div>'><a href="#">Grid Row</a>
    </li>
    <li class="col-xs-6" data-type="button" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/button.png); no-repeat;" data-html='<a href="#" class="btn btn-default">Default</a>'><a href="#"></a>
    </li>
    <li class="col-xs-6" data-type="heading" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/heading.png); background-repeat: no-repeat;" data-html='<h1>Heading 1</h1>'><a href="#">Heading</a>
    </li>
    <li class="col-xs-6" data-type="jumbotron" style="background-image: url(https://s3.amazonaws.com/jetstrap-site/images/builder/components/hero_unit.png); background-repeat: no-repeat;" data-html='<div class="jumbotron">
  <h1>Jumbotron</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>'><a href="#">Jumbotron</a>
    </li>
</ul>
<div class="page target col-sm-10"></div>

CSS

.widgets {
    height: 800px;
    background: #454443;
}
.widgets li {
    float: left;
    color: #fff;
    list-style: none;
    font-size: 13px;
    font-weight: bold;
    opacity: 0.85;
    width: 125px;
    padding-top: 75px;
    text-align: center;
    font-family:'ProximaNova-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.widgets li:hover {
    background-color: #454443;
    opacity: 1.0;
    cursor: -webkit-grab;
}
.widgets li a:hover {
    cursor: -webkit-grab;
}
.widgets li a {
    color: #fff;
    text-decoration: none;
    text-shadow: none;
}
.widget {
    width: 150px;
    height: 150px;
    margin: 15px;
}

.page {
      height: 800px;
    border: thin solid red;
}

.page .row {
    min-height: 50px;
}

.page .row div {
    border-radius: 5px;
    padding: 10px;
    min-height: 30px;
   border: 1px dotted #ccc;
}

JavaScript

// Make all widgets draggable
$(".widgets li").draggable({
    revert: "valid",
    helper: "clone",
    cursor: "move"
});



setDrop = function(targets) {
    $(targets).droppable({
        accept: ".widgets li",
        greedy: true,
        drop: function (event, ui) {
            console.log(this);
            var el = $($(ui.helper[0]).data("html"));
            $(this).append(el);
            setDrop($(".target", el));
        }
    });
};
setDrop($('.target'));