javascript 表单提交时的 JQuery-UI 可排序排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12495294/
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
JQuery-UI sortable sort on form submit
提问by Abi Xalmon
Images are loaded from Database. I would like to sort the image order using JQuery-UI sortable and save the data on form submit.
图像从数据库加载。我想使用 JQuery-UI sortable 对图像顺序进行排序，并在表单提交时保存数据。
<script type="text/javascript">
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
cursor: 'crosshair'
});
$( "#sortable" ).disableSelection();
});
</script>
<form action="" method="post">
<ul id="sortable" style="width: 524px;">
<li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li>
<li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li>
<li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li>
<li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li>
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
</form>
回答by Muthu Kumaran
When you sort each time, update the values to a hidden input field using update: function(){}in sortable. Here is my code which updates the hidden input when you sort each time. When form is submitted, the values will sent to server.
每次排序时，使用update: function(){}in sortable将值更新为隐藏的输入字段。这是我的代码，每次排序时都会更新隐藏的输入。提交表单时，值将发送到服务器。
<form action="" method="post">
<input type="hidden" id="image_order" name="image_order" value="" />
<ul id="sortable" style="width: 524px;">
<li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li>
<li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li>
<li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li>
<li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li>
</ul>
<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
</form>?
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
cursor: 'crosshair',
update: function(event, ui) {
var order = $("#sortable").sortable("toArray");
$('#image_order').val(order.join(","));
alert($('#image_order').val());
}
});
$( "#sortable" ).disableSelection();
});?
Here is the demo.
这是演示。
回答by Anant Dabhi
here is a basic solution as per my thinking
根据我的想法，这是一个基本的解决方案
create a hidden input and store its order into it.
创建一个隐藏的输入并将其顺序存储到其中。
<script type="text/javascript">
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight",
cursor: 'crosshair',
update: function(event, ui) {
var Order = $("#sortable").sortable('toArray').toString();
$('#order').val(Order);
}
});
$( "#sortable" ).disableSelection();
});
</script>
<form action="" method="post">
<ul id="sortable" style="width: 524px;">
<li id="00001" class="ui-state-default"><img src="00001.jpg" width="100" height="90" /></li>
<li id="00002" class="ui-state-default"><img src="00002.jpg" width="100" height="90" /></li>
<li id="00003" class="ui-state-default"><img src="00003.jpg" width="100" height="90" /></li>
<li id="00003" class="ui-state-default"><img src="00004.jpg" width="100" height="90" /></li>
</ul>
<div style="clear:both;"></div>
<input name="order" type="hidden" />
<input name="Submit" value="RE-ORDER" type="submit" />
</form>
now you can get order from order.
现在您可以从order.
