Elements aren't appending correctly to div box

Question

I'm trying to get my div box contents to append into the empty box an revert back into my sortable. Seems simple enough, hopefully one can see what I cannot. Code is here --> http://jsfiddle.net/Awh3G/61/

Later on down the line, I want to implement a loading scroll. If there are ideas, I'm open to hear them

Answer 1

First of all, your li's all have the same ID. that is invalid.

in order to have the sortable revert, you use the option for reverting.

And in order to append the value, you use the ui variable they give you.

Read this page: http://jqueryui.com/demos/droppable/#event-drop

After you read that, you can see it implimented here: http://jsfiddle.net/lathan/Awh3G/62/ `

$('.sorting').sortable({
    cursor: 'pointer',
    tolerance: 'pointer',
    scroll: false,
    revert: true
});


$('#dropin').droppable({
    hoverClass: 'border',
    tolerance: 'touch',
    drop: function(e,ui) {
        $('#dropin').append(ui.draggable.html() + '<br/>');
    }
});