DragDrop Builder by Nightfever

by Petr Haluza

HTML

<ul id="draggable">

    <li><a href="#">Odkaz</a></li>
    
    <li data-html='<a href="#">Tlačítkox</a> a prd'><a href="#">Tlačítko</a>
    </li>
    <li data-type="heading" data-html='<h1 contenteditable="true">Heading 1</h1>'><a href="#">Heading</a>
    </li>
    <li data-type="jumbotron" 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 id="sortable"></div>

CSS

#sortable {width:100%;height:300px;background:#ccc;overflow:auto;}
.toggle {background:green;margin:3px 0 0 0;}

JavaScript

$(function() {
    $( "#draggable li" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    
    $( "#sortable" ).sortable({
        revert: true,
        receive: function(event, ui) {
            var html = [];
            $(this).find('li').each(function() {
                html.push($(this).data("html"));
            });
            $(this).find('li').replaceWith(html.join(''));
        }
    });
});