jquery-ui sortable 排序

最新推荐文章于 2025-07-04 13:24:06 发布

Kit_G

最新推荐文章于 2025-07-04 13:24:06 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery 拖曳图片

本文链接：https://blog.youkuaiyun.com/Kit_G/article/details/77896971

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何利用jQuery UI的sortable插件实现图片的拖曳排序，并详细讲解了引入相关文件、页面布局以及初始化sortable插件的过程，特别是通过toArray获取拖曳后图片顺序的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近工作中遇上一个需求，可以实现拖曳图片改变图片的顺序并保存到后台。
研究了一番发现可以用jquery-ui 的sortable功能来完成；
一、引入jquery和jquery-ui文件

<link ref="stylesheet" href="jquery-ui.min.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

二、页面布局，我这里引用了模板遍历。注意关键是给ul一个class或者id

<div class="form-group">
    <label class="control-label col-sm-1">曲谱图片</label>
    <ul id="layer-img" class="control-label col-sm-9 sortable" style="text-align: left;">
        <volist name="data.image" id="image">
            <li class="portlet" style="display: inline-block" id="{$image['id']}">
                <img id="sheet_img{$image['id']}" src="{$image['url']}" alt="">
            </li>
        </volist>
    </ul>
</div>

三、初始化sortable插件
这里比较要注意的就是获取拖曳的对象的参数，使用toArray可以获取子级的属性值；

<script>
    $('.sortable').sortable({
        placeholder: "portel-placeholder"  //设定占位符，事先设定占位符的样式，拖曳时会出现占位符
        update: function() {  //因为是要拖曳改变图片顺序，所以选择update,拖曳更新后调用函数
            var image_ids = $('.sortable').sortable('toArray', {attribute: id});//获取class为sortable的子级的id属性值，并转化为数组；
            $.ajax({
                type: "post",
                url: "",
                data: {image_ids},
                dataType: "json",
                success: function(result) {
                    window.location.reload(); //后台获取到数据刷新页面
                }
            });
        }
    });
</script>