Sortable+Droppable processing test

by Anton

HTML

<ul id="list1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul id="list2">
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>
<hr>
<div id="log"></div>

CSS

ul {
    float:left;
    border: solid 1px black;
    margin: 1em;
}

li {
    border: dotted 1px #808080;
    padding: 0.2em 0.5em;
}

hr {
    clear: left;
}

JavaScript

var count = 0;

$('#list1 li').draggable({
    connectToSortable: '#list2'
});

$('#list2').droppable({
    drop: function(e, ui) {
        $('#log').append(count++ + ' drop<br>');
    }
}).sortable();