Add to Jquery-ui sortable list

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.

For me, the $("#sortable").sortable('refresh'); didn't worked.

But this worked: $("#sortable").trigger("sortupdate");

I know it's not exactly the answer but @karim79 helped me to find a way to add an image to the sortable list, if anyone needs it here it is:

<input type='file' onchange="readURL(this);" style="width: 100%;" />

function readURL(input) {    if (input.files && input.files[0]) {        var reader = new FileReader();        reader.onload = function (e) {            var $li = $("<li class='ui-state-default'/>");            $li.append('<img src="'+ e.target.result +'" width="150" height="200" />');            $("#sortable").append($li);            $("#sortable").sortable('refresh');        };        reader.readAsDataURL(input.files[0]);    }}