sorttable 如何排序啊
时间:2010-03-24
来源:互联网
sorttable 这插件如何在页面加载时排序他们的位置啊
如下.sort为拖动对象项我如何在肯定他的位置啊。那位大虾指点一下
<div id="content" class="ui-sortable">
<h2>详细内容</h2>
<dl class="sort">
<dt>热门日志</dt>
<dd>97圈长跑,献给清华母校97华诞</dd>
<dd>picasaweb.google.com/isaacshun再次更新</dd>
</dl>
</div>
<div id="sidebar" class="ui-sortable">
<h2>滚动新闻</h2>
<dl class="sort">
<dt>今日热点</dt>
<dd>校庆日安排</dd>
<dd>五一长假</dd>
</dl>
<dl class="sort">
<dt>博客</dt>
<dd>isaac</dd>
<dd>fresheggs</dd>
</dl>
<dl class="sort">
<dt>友情链接</dt>
<dd>自由空间 FreeEE</dd>
<dd>水木清华 SMTH</dd>
</dl>
</div>
$(function(){
//引用主页面中的所有块
var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
var $els = $(els.toString());
//动态添加“增加子项目”、“向上移动”按钮
$("h2", $els.slice(0,-1)).append('<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>');
$("dt", $els).append('<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>');
//绑定相关事件
$("a.add").bind("click", addItem);
$("a.up").bind("click", moveUp);
//使用jQuery插件
$els.sortable({
items: '> dl', //拖拽对象
handle: 'dt', //可触发该事件的对象
cursor: 'move', //鼠标样式
opacity: 0.8, //拖拽时透明
appendTo: 'body',
connectWith: els,
start: function(e,ui) {
ui.helper.css("width", ui.item.width());
},
change: sortableChange,
update: sortableUpdate //用于回收站
});
});
如下.sort为拖动对象项我如何在肯定他的位置啊。那位大虾指点一下
<div id="content" class="ui-sortable">
<h2>详细内容</h2>
<dl class="sort">
<dt>热门日志</dt>
<dd>97圈长跑,献给清华母校97华诞</dd>
<dd>picasaweb.google.com/isaacshun再次更新</dd>
</dl>
</div>
<div id="sidebar" class="ui-sortable">
<h2>滚动新闻</h2>
<dl class="sort">
<dt>今日热点</dt>
<dd>校庆日安排</dd>
<dd>五一长假</dd>
</dl>
<dl class="sort">
<dt>博客</dt>
<dd>isaac</dd>
<dd>fresheggs</dd>
</dl>
<dl class="sort">
<dt>友情链接</dt>
<dd>自由空间 FreeEE</dd>
<dd>水木清华 SMTH</dd>
</dl>
</div>
$(function(){
//引用主页面中的所有块
var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
var $els = $(els.toString());
//动态添加“增加子项目”、“向上移动”按钮
$("h2", $els.slice(0,-1)).append('<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>');
$("dt", $els).append('<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>');
//绑定相关事件
$("a.add").bind("click", addItem);
$("a.up").bind("click", moveUp);
//使用jQuery插件
$els.sortable({
items: '> dl', //拖拽对象
handle: 'dt', //可触发该事件的对象
cursor: 'move', //鼠标样式
opacity: 0.8, //拖拽时透明
appendTo: 'body',
connectWith: els,
start: function(e,ui) {
ui.helper.css("width", ui.item.width());
},
change: sortableChange,
update: sortableUpdate //用于回收站
});
});
作者: javalucky 发布时间: 2010-03-24
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28