将项目添加到Jquery-ui可排序列表中。

Question

关于 Jquery-UI可排序列表 的简单问题。

我已经做了：

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

我该如何使用这个方法将用户输入的内容添加到jquery-ui可排序列表的末尾？

- David19801

Answer 1

你可以考虑将文本放在一个带有 ui-state-default 类的 LI 元素中，并将其插入可排序的 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');
});

你可以在这里尝试。

- karim79

---

谢谢！但是这个是如何将</li>添加到列表项中的呢？另外，您有关于在变量名前使用$符号的更多信息吗，就像这里的$li一样？ - David19801

@David19801 - jQuery会自动添加闭合标签。$只是一个通用的约定，表示这个变量保存了一个jQuery对象。希望这能澄清事情。 - karim79

@karim79：jQuery（或-UI）是否也负责在新的<li>中添加<span class="ui-icon ui-icon-arrowthick-2-n-s">？我在你的fiddle中没有明确看到它。谢谢。 - Karl Kieninger

这对我很有帮助，使我能够将图像添加到可排序列表中，谢谢。 - magorich

Answer 2

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

但是这个可以：$("#sortable").trigger("sortupdate");

- mFlorin

Answer 3

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

运作良好。

还有一件事需要注意：

handle: '.iORAS_ORD'

如果您使用sortable处理器，请勿使用jQuery进行选择，例如：

handle: $('.iORAS_ORD')

如果使用jQuery，在插入新项后无法对其进行排序。 了解更多相关内容。

- FrenkyB

Answer 4

我知道这不完全是答案，但@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]);
    }
}

- magorich