Sortablesdemo-InterfacepluginforjQuery
body
{
background:#fff;
height:100%;
font-family:Arial,Helvetica,sans-serif;
font-size:10pt;
}
#sort1
{
width:350px;
height:200px;
}
divimg
{
float:left;
width:60px;
height:60px;
margin:10px;
border:solid3px#ccc;
}
.sorthelper
{
background-color:#f5f5f5;
float:left;
border:4pxsolid#ccc;
}
.sortableactive
{
}
.sortablehover
{
}
提交排序
$(document).ready(
function(){
$("#sort1").Sortable(
{
accept:"sortableitem",//拖拽元素class名
helperclass:"sorthelper",//拖拽时投放位置的样式
activeclass:"sortableactive",//拖拽时悬空时class
hoverclass:"sortablehover",//拖拽时经过时class
opacity:0.5,//拖拽时透明度
fx:200,//拖拽时回位速度
revert:true,
floats:true,
tolerance:"pointer",
onchange:changedata//拖拽状态改变时触发事件
}
)
}
);
functionchangedata()
{
}
functionserialize(s)
{
serial=$.SortSerialize(s);
alert(serial.hash.replace(/&sort1/[/]=/g,",").replace("sort1[]=",""));
/*这里可使用jqueryform插件ajax提交
（http://www.malsup.com/jquery/form/#code-samples）
使用也非常方便
*/
};
推荐阅读：