Question

的简单问题

我做了：

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

如何使用它将用户输入的内容添加到jquery-ui可排序列表的末尾？

Answer 1

据推测，您只需获取文本，将其包含在具有类ui-state-default的LI中，然后将其插入可排序的UL元素中。然后，您需要refresh sortable才能识别新插入的元素：

$(".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.

Answer 2

对我来说，$("#sortable").sortable('refresh');没有效果。

但这有效：$("#sortable").trigger("sortupdate");

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

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

工作正常。

还有一件事需要注意：

handle: '.iORAS_ORD'

如果您使用带可排序的句柄，请不要使用jquery进行选择，例如：

handle: $('.iORAS_ORD')

如果使用jQuery，则在插入新项目后无法进行排序。 More on the subject here.

添加到Jquery-ui可排序列表

4 个答案: