jquery应用 图片拖拽排序
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Sortablesdemo-InterfacepluginforjQuery</title>
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript"src="interface.js"></script>
<styletype="text/css"media="all">
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
{
}
</style>
</head>
<body>
<divid="sort1">
<imgsrc="1.jpg"class="sortableitem"id="1"alt="1"/>
<imgsrc="2.jpg"class="sortableitem"id="2"alt="2"/>
<imgsrc="3.jpg"class="sortableitem"id="3"alt="3"/>
<imgsrc="4.jpg"class="sortableitem"id="4"alt="4"/>
<imgsrc="5.jpg"class="sortableitem"id="5"alt="5"/>
<imgsrc="6.jpg"class="sortableitem"id="6"alt="6"/>
</div>
<divclass="serializer">
<ahref="#"onClick="serialize();returnfalse;">提交排序</a>
</div>
<scripttype="text/javascript">
$(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）
使用也非常方便
*/
};
</script>
</body>
</html>
推荐阅读：
