Добавить в сортируемый список Jquery-ui

Question

Простой вопрос о сортируемых списках Jquery-UI

Я сделал:

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

Как я могу использовать это, чтобы добавить то, что пользователь вводит в конец сортируемого списка jquery-ui?

Answer 1

Предположительно, вы просто взяли бы текст, завернули его в LI с классом ui-state-default и вставили его в сортируемый элемент UL. Затем вам нужно будет обновить сортируемую, чтобы новый распознаваемый элемент был распознан:

$(".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');
});

Вы можете попробовать это здесь.

Answer 2

$("selector").sortable('refresh') 

отлично работает.

Есть еще одна вещь, о которой нужно знать:

handle: '.iORAS_ORD'

Если вы используете дескриптор с сортируемым, не используйте jquery для выделения, например:

handle: $('.iORAS_ORD')

При использовании jQuery сортировка после вставки невозможна для вновь вставленных элементов. Подробнее об этом здесь.

Answer 3

Я знаю, что это не совсем ответ, но @ karim79 помог мне найти способ добавить изображение в сортируемый список, если кому-то это нужно, вот оно:

<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]);
    }
}

Answer 4

Для меня $("#sortable").sortable('refresh'); не сработало.

Но это сработало: $("#sortable").trigger("sortupdate");