jquery应用-图片拖拽排序

　2010-09-14 13:09:29　来源：WEB开发网　　　

核心提示：最近在研究Interface elements for jQuery（http://interface.eyecon.ro/），此插件封装了一些拖拽效果，jquery应用-图片拖拽排序，并且使用非常简单，能轻松实现拖拽排序、购物车、博客首页排版等UI

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

预览：

代码：

<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=http://tech.ddvip.com/2008-09/"1.jpg" class="sortableitem" id="1" alt="1"/> 　　<img src=http://tech.ddvip.com/2008-09/"2.jpg" class="sortableitem" id="2" alt="2"/> 　　<img src=http://tech.ddvip.com/2008-09/"3.jpg" class="sortableitem" id="3" alt="3"/> 　　<img src=http://tech.ddvip.com/2008-09/"4.jpg" class="sortableitem" id="4" alt="4"/> 　　<img src=http://tech.ddvip.com/2008-09/"5.jpg" class="sortableitem" id="5" alt="5"/> 　　<img src=http://tech.ddvip.com/2008-09/"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>