打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jquery应用 图片拖拽排序

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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
jQuery实现图片放大预览效果
jQuery——jQuery的CSS,class,属性操作及案例应用
CSS+jQuery打造的多种过渡方式带缩略图的图片幻灯切换效果
jQuery/CSS3实现图片层叠展开特效
jQuery 图片切换,带标题和说明文字
jquery瀑布流布局(masonry.js)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服