jquery ui实现图片拖拽排序

这几天公司后台改版，老板让实现一个拖拽图片实现排序的效果。本人水平一般，这个效果感觉好难！小公司一枚，也没高手。

无可奈何之下，只得求助度娘，搜了一个下午也没发现太好的插件或代码。回到桌面，看到了JQUERY UI刚用这个实现了一个拖拽效果。随便打开demos。发现了这个sortable文件夹，打开后喜极而泣。真是众里寻他千百度，废话不说了，上代码。下面的是完成后

效果。

HTML如下：

<div class="table_row" id="sortable" style="z-index:0">

<div class="order_img or_active"> <img src="images/cover.jpg" width="169" height="113" />
<div class="mark_o png">1</div>
</div>

<div class="order_img or_active"> <img src="images/cover.jpg" width="169" height="113" />
<div class="mark_o png">1</div>
</div>

</div>

JS如下：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
<script src="js/jquery.ui.sortable.js"></script>

<script type="text/javascript">
$(function(){
$("#sortable" ).sortable({ containment: "#sortable" , opacity: 0.8});
$("#sortable" ).disableSelection();
$('#sortable').sortable({ stop: function(event, ui) {

//这一段是自己网站需要，可以不管，stop是拖拽结束后触发的事件，看自己需要，具体详细可参照JQUERY UI的API
$("#sortable .order_img").each(function(index){
$(this).children(".mark_o").html(index+1);
})


} });

});
</script>

最后感慨下，JQUERY真是不负锋利之名。