最近工作中遇上一个需求，可以实现拖曳图片改变图片的顺序并保存到后台。
研究了一番发现可以用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>