添加到 Jquery-ui 可排序列表

【问题标题】：Add to Jquery-ui sortable list添加到 Jquery-ui 可排序列表
【发布时间】：2012-01-10 14:13:05
【问题描述】：

我做了：

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

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

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案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.

【讨论】：

谢谢！但是如何将添加到列表项？另外，在变量名之前，你有更多关于 $ 的信息吗？
@David19801 - jQuery 负责添加结束标记。 $ 只是一个常见的约定，表示此变量包含一个 jQuery 对象。希望能解决问题。
@karim79: jQuery（或-UI）还负责添加和新的
?我没有在你的小提琴中明确看到它。谢谢。

这对我将图像添加到可排序列表有很大帮助，谢谢

【解决方案2】：

对我来说，$("#sortable").sortable('refresh'); 不起作用。

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

【讨论】：

【解决方案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]);
    }
}

【讨论】：

【解决方案4】：

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

工作正常。

还有一件事需要注意：

handle: '.iORAS_ORD'

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

handle: $('.iORAS_ORD')

如果使用 jQuery，插入后的排序不能对新插入的项目进行。 More on the subject here.

【讨论】：