Javascript 添加到 Jquery-ui 可排序列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8804633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add to Jquery-ui sortable list
提问by David19801
Simple question about Jquery-UI sortable lists
关于Jquery-UI 可排序列表的简单问题
I have made:
我做了：
<div id="adder">
<input type="text" name="add1" /><br />
<input class='btn' type='submit' value='Submit' />
</div>
How can I use this to add what the user enters to the end of the jquery-ui sortable list?
我如何使用它来将用户输入的内容添加到 jquery-ui 可排序列表的末尾？
回答by karim79
Presumably, you would just take the text, wrap it in an LI with the class ui-state-defaultand insert it into the sortable UL element. You will then need to refreshthe sortable to cause the newly inserted element to be recognised:
据推测，您只需获取文本，将其与类一起包装在 LI 中，ui-state-default然后将其插入到可排序的 UL 元素中。然后，您需要刷新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');
});
回答by mFlorin
For me, the $("#sortable").sortable('refresh');didn't worked.
对我来说，$("#sortable").sortable('refresh');没有用。
But this worked: $("#sortable").trigger("sortupdate");
但这有效： $("#sortable").trigger("sortupdate");
回答by magorich
I know it's not exactly the answer but @karim79 helped me to find a way to add an image to the sortable list, if anyone needs it here it is:
我知道这不完全是答案，但@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]);
}
}
回答by FrenkyB
$("selector").sortable('refresh')
works fine.
工作正常。
There is one more thing to be aware of:
还有一件事需要注意：
handle: '.iORAS_ORD'
If you use handle with sortable, don't use jquery for selection, like:
如果您使用带有 sortable 的句柄，请不要使用 jquery 进行选择，例如：
handle: $('.iORAS_ORD')
If using jQuery, sorting after insert is not possible on newly inserted items. More on the subject here.
如果使用 jQuery，则无法对新插入的项目进行插入后排序。 更多关于这里的主题。
