JQuery droppable problem

Question

I'm having trouble with the JQuery's droppable feature. I have modified JS from here: http://jqueryui.com/demos/droppable/

<script type="text/javascript">
$(function() {
    $("ul.draggable li").draggable();
    $("div.droppable").droppable({
            drop: function(event, ui) {
                    alert('Hello World');
            }
    });
});
</script>

<ul class="draggable">
    <li id="one">One</li>
    <li id="two">Two</li>
    <li id="three">Three</li>
</ul>

<div class="droppable">
    <p id="round">Drop here</p>
</div>

The JQuery works fine if I set draggable and droppable as IDs of the HTML elements.
However when they're classes only the draggable functionality works, the drop feature doesn't seem to do anything, and the alert function does not get executed.

Any help would be great.

Answer 1

Turns out there was a problem with my JQuery libraries. Thanks Nick for testing.