`
javatoyou
  • 浏览: 1019317 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

jquery应用-图片拖拽排序

 
阅读更多

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

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

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Sortablesdemo-InterfacepluginforjQuery</title>
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript"src="interface.js"></script>
<styletype="text/css"media="all">
body
{}{
background:#fff;
height:100%;
font-family:Arial,Helvetica,sans-serif;
font-size:10pt;
}
#sort1
{}{
width:350px;
height:200px;
}
divimg
{}{
float:left;
width:60px;
height:60px;
margin:10px;
border:solid3px#ccc;
}
.sorthelper
{}{
background-color:#f5f5f5;
float:left;
border:4pxsolid#ccc;
}
.sortableactive
{}{
}
.sortablehover
{}{
}
</style>
</head>
<body>
<divid="sort1">
<imgsrc="1.jpg"class="sortableitem"id="1"alt="1"/>
<imgsrc="2.jpg"class="sortableitem"id="2"alt="2"/>
<imgsrc="3.jpg"class="sortableitem"id="3"alt="3"/>
<imgsrc="4.jpg"class="sortableitem"id="4"alt="4"/>
<imgsrc="5.jpg"class="sortableitem"id="5"alt="5"/>
<imgsrc="6.jpg"class="sortableitem"id="6"alt="6"/>

</div>
<divclass="serializer">
<ahref="#"onClick="serialize();returnfalse;">提交排序</a>
</div>
<scripttype="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//拖拽状态改变时触发事件
}
)
}
);
functionchangedata()
{
}

functionserialize(s)
{
serial=$.SortSerialize(s);
alert(serial.hash.replace(/&sort1/[/]=/g,",").replace("sort1[]=",""));
/**//*这里可使用jqueryform插件ajax提交
（http://www.malsup.com/jquery/form/#code-samples）
使用也非常方便
*/
};
</script>
</body>
</html>
分享到：
| jquery应用-AJAX推拽分页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics