打开APP
未登录
开通VIP,畅享免费电子书等14项超值服
开通VIP
首页
好书
留言交流
下载APP
联系客服
jquery应用 图片拖拽排序
quasiceo
>《待分类1》
2014.12.12
关注
<
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
>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报
。
打开APP,阅读全文并永久保存
查看更多类似文章
猜你喜欢
类似文章
【热】
打开小程序,算一算2024你的财运
jQuery实现图片放大预览效果
jQuery——jQuery的CSS,class,属性操作及案例应用
CSS+jQuery打造的多种过渡方式带缩略图的图片幻灯切换效果
jQuery/CSS3实现图片层叠展开特效
jQuery 图片切换,带标题和说明文字
jquery瀑布流布局(masonry.js)
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享
收藏
点击这里,查看已保存的文章
导长图
关注
一键复制
下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!
联系客服
微信登录中...
请勿关闭此页面
先别划走!
送你5元优惠券,购买VIP限时立减!
5
元
优惠券
优惠券还有
10:00
过期
马上使用
×