关于jquery-ui,页面横向纵向拖动布局的方法。

$(function() {
$( ".sortable" ).sortable({
placeholder: "ui-state-highlight" , //拖动时，用css
cursor: "move",            //鼠标移动上去显示的形状
axis : "x",                    //横向 x和y
items :"a",                        //只是div可以拖动
opacity: 0.6,                       //拖动时，透明度为0.6
revert: true,                       //释放时，增加动画
update : function(event, ui){       //更新排序之后
var text = "";
$(".sortable a").each(function(i){
text = text+$(this).attr("name")+",";
})
$.ajax({
url:"<%=basePath%>/p/orderBy/saveOrderById?ids="+text,
type:"get",
dataType:"json",
async:false,
success:function(data){
}
});
}
});
});

<div class="sortable">
<a class="ui-state-default" >拖我撒1</a>
<a class="ui-state-default" >拖我撒2</a>
<a class="ui-state-default" >拖我撒3</a>
<a class="ui-state-default" >拖我撒4</a>
</div>