jquery应用-图片拖拽排序
来源:互联网 发布:相机3a算法 编辑:程序博客网 时间:2024/05/20 22:06
最近在研究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">
<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>
<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">
<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>
- jquery应用-图片拖拽排序
- 一个简单的图片拖拽排序效果 ----- JQUERY特效模板
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- JQuery 图片拖拽练习
- jquery 拖拽排序拖动
- jquery-ui 拖拽排序
- jQuery图片缩放拖拽插件 imageQ
- JQuery插件实现图片拖拽删除
- jquery插件之拖拽删除图片
- jquery拖拽排序控件DragSort
- jquery-ui的拖拽排序(sortable)
- jQuery实现div横向拖拽排序
- jquery实现表格拖拽排序
- jQuery图片延迟加载技术的应用(砌墙效果)
- jQuery中的animate的应用(图片的自动移动)
- Jquery 裁剪图片插件imgAreaSelect应用注意点整理
- 别人用jquery写的图片拖拽效果
- DOM初步
- 设计笔记[2008-2-17]
- EJB问题
- 关于配置支持JFreeChart的Tomcat
- Why StringBuilder efficient than the string?
- jquery应用-图片拖拽排序
- 香港的全称是中华人民共和国香港特别行政区
- 渔夫们像棒球接手那样把帽子鸭舌朝后扭转
- 腾讯QQ效仿MSN传“爱国头像” 传播效果不佳
- Grandfather's Clock
- 既然爱过为何却轻易的放弃
- c# 反射的用法
- Server Application Error报错信息的解决方案
- 在xp上通过vmware装ubuntu,并让ubuntu通过代理服务器访问Internet