针对后台列表table拖拽比较实用的jquery拖动排序
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>jqueryUI拖动</
title
>
</
head
>
<
script
src
=
"js/jquery-1.11.0.min.js"
></
script
>
<
script
src
=
"js/jquery-ui.min.js"
></
script
>
<
style
>
tr{cursor: pointer;}
</
style
>
<
body
>
<
table
id
=
"sort"
>
<
thead
>
<
tr
>
<
th
class
=
"index"
>序号</
th
>
<
th
>年份</
th
>
<
th
>标题</
th
>
<
th
>作者</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<
td
class
=
"index"
>1</
td
>
<
td
>2014</
td
>
<
td
>这是第1个</
td
>
<
td
>阿斯蒂芬阿斯蒂芬</
td
>
</
tr
>
<
tr
>
<
td
class
=
"index"
>2</
td
>
<
td
>2015</
td
>
<
td
>这是第2个</
td
>
<
td
>阿萨德发射点发岁的</
td
>
</
tr
>
<
tr
>
<
td
class
=
"index"
>3</
td
>
<
td
>2016</
td
>
<
td
>这是第3个</
td
>
<
td
>阿萨德发送地方</
td
>
</
tr
>
<
tr
>
<
td
class
=
"index"
>4</
td
>
<
td
>2017</
td
>
<
td
>这是第4个</
td
>
<
td
>的说法大赛分</
td
>
</
tr
>
</
tbody
>
</
table
>
</
body
>
</
html
>
$(document).ready(
function
(){
var
fixHelperModified =
function
(e, tr) {
var
$originals = tr.children();
var
$helper = tr.clone();
$helper.children().each(
function
(index) {
$(
this
).width($originals.eq(index).width())
});
return
$helper;
},
updateIndex =
function
(e, ui) {
$(
'td.index'
, ui.item.parent()).each(
function
(i) {
$(
this
).html(i + 1);
});
};
$(
"#sort tbody"
).sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
});
针对后台列表table拖拽比较实用的jquery拖动排序的更多相关文章
- jquery拖拽排序,针对后台列表table进行拖拽排序(超实用!)
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...
- ztree插件的使用及列表项拖拽的实现(jQuery)+异步加载节点数据
为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...
- Qt之股票组件-自选股--列表可以拖拽、右键常用菜单
目录 一.开头嘴一嘴 二.效果展示 三.自选股列表 1.列表初始化 2.添加Item 3.右键菜单 4.拖拽Item 5.刷新数据 四.相关文章 原文链接:Qt之股票组件-自选股--列表可以拖拽.右键 ...
- Android学习系列(11)--App列表之拖拽ListView(下)
接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法. 在这个方法中我们主要是处理 ...
- Android学习系列(10)--App列表之拖拽ListView(上)
研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨. 鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...
- Android学习系列--App列表之拖拽ListView(下)
接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法. 在这个方法中我们主要是处理 ...
- Android学习系列--App列表之拖拽ListView(上)
研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨. 鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. 一 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- odoo开发笔记-tree列表视图拖拽排序
odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...
随机推荐
- Linux环境下搭建测试环境(LAMP详细说明)
一.安装虚拟机与CentOS7 传送门:https://www.cnblogs.com/mrgavin/p/9372393.html 注意:以下安装,我都是用的root权限. 二.安装Apache1. ...
- Executor , ExecutorService 和 Executors
三者的主要区别和关系如下: Executor 和 ExecutorService 这两个接口主要的区别是:ExecutorService 接口继承了 Executor 接口,是 Executor 的子 ...
- nginx location URI匹配规则
当nginx收到一个请求后,会截取请求的url部份,去搜索所有location指令中定义的URI匹配模式.在server模块中可以定义多个location指令来匹配不同的url请求,多个不同的loca ...
- 日期时间函数(1)-time()&gmtime()&strftime()&localtime()
◆time() 取得当前时间.此函数会返回从公元1970年1月1日的UTC时间从0时0分0秒算起到现在所经过的秒数.如果参数t为非空指针的话, 此函数也会将返回值存到t指针所指的内存. 成功则返回秒数 ...
- 【转】Update: Android.mk 中的 LOCAL_SRC_FILES, LOCAL_C_INCLUDES
看原文请移步:Update: Android.mk 中的 LOCAL_SRC_FILES, LOCAL_C_INCLUDES 我在先前的两篇post 编写Android.mk中的LOCAL_SRC_F ...
- eclipse workspace 优化
换了新的工作空间,当然在开发之前先优化该工作空间啦! 1.换编码 2.优化加载项 去除不用的 3.优化代码检查 不用的去掉 4.禁止更新功能 5.更换字体其他个人偏好设置 微软雅黑 字体5号 ...
- java 监听器实现原理
实例二: @Override public void onStart(Intent intent, int startid) { super.onStart(intent, startid); l ...
- CentOS LDAP安装配置
安装: Install the openldap, openldap-servers, and openldap-clients RPMs. Edit the /etc/openldap/slapd. ...
- 一款基于jquery的鼠标经过图片列表特效
今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览 源码下载 实现的代码 html代码: < ...
- FusionCharts JavaScript API - Events 全局事件处理
FusionCharts JavaScript API - Events 全局事件处理 Home > FusionCharts XT and JavaScript > API Refere ...