的方法如下:
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
<div>
标签,并为每个Div元素添加一个唯一的标识符,例如:<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
sortable()
方法对Div元素进行排序,可以通过拖拽来改变它们的顺序。在JavaScript代码中添加以下代码:$(function() {
$("div").sortable();
});
<form id="myForm" action="submit.php" method="post">
<input type="hidden" name="divOrder" id="divOrder">
<input type="submit" value="Submit">
</form>
sortable()
方法的toArray()
函数获取排序后的Div元素的顺序,并将其存储在隐藏的输入字段中。同时,监听表单的提交事件,在提交表单之前更新隐藏字段的值。添加以下代码:$(function() {
$("div").sortable({
update: function(event, ui) {
var divOrder = $(this).sortable("toArray");
$("#divOrder").val(divOrder.join(","));
}
});
$("#myForm").submit(function() {
var divOrder = $("div").sortable("toArray");
$("#divOrder").val(divOrder.join(","));
return true;
});
});
submit.php
),并将排序后的Div元素的顺序作为参数传递给服务器端。请注意,以上代码中的submit.php
是一个示例的服务器端处理脚本,你需要根据自己的实际需求来编写相应的服务器端代码来处理表单提交。
这种方法可以用于需要对Div元素进行重新排序并将排序结果提交到服务器端的场景,例如拖拽排序的图片列表、任务列表等。
领取专属 10元无门槛券
手把手带您无忧上云