Kit_G的博客通过本文主要向大家介绍了jquery,拖曳图片等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
研究了一番发现可以用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>