Add to Jquery-ui sortable list

Question

Simple question about Jquery-UI sortable lists

I have made:

<div id="adder"> <input type="text" name="add1" /><br /> <input class='btn' type='submit' value='Submit' /> </div> 

How can I use this to add what the user enters to the end of the jquery-ui sortable list?

Answer 1

Presumably, you would just take the text, wrap it in an LI with the class ui-state-default and insert it into the sortable UL element. You will then need to refresh the sortable to cause the newly inserted element to be recognised:

$(".btn").click(function (e) {     e.preventDefault();     var text = $("input[name='add1']").val();     var $li = $("<li class='ui-state-default'/>").text(text);     $("#sortable").append($li);     $("#sortable").sortable('refresh'); }); 

You can try it here.