现在的位置: 首页 > 综合 > 正文

jquery应用-图片拖拽排序

2011年01月14日 ⁄ 综合 ⁄ 共 2301字 ⁄ 字号 评论关闭

最近在研究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="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">
<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>

抱歉!评论已关闭.