实现前端图片排序，并将排序结果传给后台

最新推荐文章于 2023-08-17 16:32:10 发布

原创最新推荐文章于 2023-08-17 16:32:10 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

该博客介绍了一种使用jQuery UI库实现在前端页面上通过拖拽实现图片排序的方法。当用户完成排序后，通过AJAX将排序结果POST到后台服务器，如果返回成功则显示提示，否则取消排序并给出错误提示。博客内容包括HTML结构、CSS样式和JavaScript代码，特别是使用了`sortable`插件来实现排序功能。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>排序</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style type="text/css">
img{
cursor: pointer;
width:20%;
margin:10px
}
</style>
</head>

<body>
<div class="sortable">
<img id="1" src="1.jpg" alt="" />
<img id="2" src="1.jpg" alt="" />
<img id="3" src="1.jpg" alt="" />
<img id="4" src="1.jpg" alt="" />
</div>
<script>
$(function() {
$(".sortable").sortable({
update: function(event, ui) { //更新排序之后
var categoryids = $(this).sortable("toArray");
var $this = $(this);
console.log(categoryids);
$.ajax({
url: '后台url',
type: 'POST',
data: 'categoryids=' + categoryids,
success: function(json) {
if(json == 1) {
layer.msg('移动成功', {
icon: 1
});
} else {
$this.sortable("cancel");
layer.msg('移动失败', {
icon: 2
});
}
}
});
}
});
$(".sortable").disableSelection();
});
</script>
</body>
</html>