jquery插件图片拖拽排序【新增预览图和下载包】

jquery应用-图片拖拽排序

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

代码：

<html>

<head>

<title>Sortables demo - Interface plugin for jQuery</title>

body

{

background: #fff;

height: 100%;

font-family: Arial, Helvetica, sans-serif;

font-size: 10pt;

}

#sort1

{

350px;

height: 200px;

}

div img

{

float: left;

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>

</div>

$(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>

源码下载地址：点击这里下载压缩包