jquery应用-图片拖拽排序

最近在研究Interface elements for jQuery（http://interface.eyecon.ro/），此插件封装了一些拖拽效果，并且使用非常简单，能轻松实现拖拽排序、购物车、博客首页排版等UI，所以模仿和讯的图片排序做了一个简单样例：

预览：
  width="500" height="500" src="http://www.5533110.com/yw/Uploadfile/20070613/20070613_113314_109/123/" style="width: 561px; height: 369px;">
代码：

< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > Sortables demo - Interface plugin for jQuery </ title >
         < script  type ="text/javascript"  src ="jquery.js" ></ script >
         < script  type ="text/javascript"  src ="interface.js" ></ script >
< style  type ="text/css"  media ="all" >
body
{}{
    background: #fff;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
}
#sort1
{}{
    width: 350px;
    height: 200px;
}
div img 
{}{
    float: left;
    width: 60px;
    height: 60px;
    margin:10px;
    border:solid 3px #ccc;
}
.sorthelper
{}{
    background-color: #f5f5f5;
    float: left;
    border:4px solid #ccc;
}
.sortableactive
{}{
}
.sortablehover
{}{
}
</ style >
</ head >
< body >
< div  id ="sort1" >
     < img  src ="1.jpg"  class ="sortableitem"  id ="1"  alt ="1" />
     < img  src ="2.jpg"  class ="sortableitem"  id ="2"  alt ="2" />
     < img  src ="3.jpg"  class ="sortableitem"  id ="3"  alt ="3" />
     < img  src ="4.jpg"  class ="sortableitem"  id ="4"  alt ="4" />
     < img  src ="5.jpg"  class ="sortableitem"  id ="5"  alt ="5" />
     < img  src ="6.jpg"  class ="sortableitem"  id ="6"  alt ="6" />

</ div >
< div   class ="serializer" >
< a  href ="#"  onClick ="serialize(); return false;"   > 提交排序 </ a >
</ div >
< script  type ="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         //拖拽状态改变时触发事件
            }
        )
    }
);
function changedata()
{
}

function serialize(s)
{
    serial = $.SortSerialize(s);
    alert(serial.hash.replace(/&sort1/[/]=/g,",").replace("sort1[]=",""));
    /**//*这里可使用jquery form插件ajax提交
    （http://www.malsup.com/jquery/form/#code-samples）
       使用也非常方便
    */
};
</ script >     
</ body >
</ html >