Drag and Drop update html

by yeyene

HTML

<ul id="draggable">
    <li><a href="#">test 1</a></li>
    <li><a href="#">test 2</a></li>
    <li><a href="#">test 3</a></li>    
</ul>
<div id="sortable"></div>

CSS

#sortable {width:50%;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('<div class="toggle">'+$(this).html()+'</div>');
            });
            $(this).find('li').replaceWith(html.join(''));
        }
    });
});