jQuery UI可排序追加

Question

here is my jquery code as it stands.

$(document).ready(function() {
$('#btn1').click(function() {
   $("ol").append("<li>"+$("#txt1").val()+"</li>");
   $("#txt1").val("").focus();
   $('li').addClass('block2');
   $('li').click(function() {
     $(this).hide(500, function() {
     $(this).remove('li');
   });
 });
});
});

Its basically a blank todo list, however when you enter in text and click the button, it appends to the list. I'm looking for code to re-arrange the items in the list 'that have been appended'. All the examples for jquery-ui for sort-able or drop-able, all have 'li' elements already in place in the HTML so this will not work in my code.

How do I add to my jquery code to make a user entered list rearrangable?

Answer 1

You can do this by recalling sortable() inside the first .click() , like so:

$(document).ready(function() {
    $('#btn1').click(function() {
        $("ol").append("<li>"+$("#txt1").val()+"</li>");
        $("#txt1").val("").focus();
        $('li').addClass('block2');
        $('ol').sortable();
        $('li').click(function() {
            $(this).hide(500, function() {
            $(this).remove('li');
        });
    });
});