jquery ui sortable 实现table,row的拖动。(Make Table Rows Sortable Using jQuery UI Sortable)
2011-09-29 16:15
916 查看
// Return a helper with preserved width of cells var fixHelper = function(e, ui) { //console.log(ui) ui.children().each(function() { $(this).width($(this).width()); //在拖动时,拖动行的cell(单元格)宽度会发生改变。在这里做了处理就没问题了 }); return ui; }; jQuery(function(){ jQuery("#hrCalendar tbody").sortable({ //这里是talbe tbody,绑定 了sortable helper: fixHelper, //调用fixHelper axis:"y", start:function(e, ui){ ui.helper.css({"background":"#fff"}) //拖动时的行,要用ui.helper return ui; }, stop:function(e, ui){ //ui.item.removeClass("ui-state-highlight"); //释放鼠标时,要用ui.item才是释放的行 return ui; } }).disableSelection(); })
参考:http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/
相关文章推荐
- jquery ui sortable 实现table,row的拖动。(Make Table Rows Sortable Using jQuery UI Sortable)
- 用Jquery UI Sortable与数据库实现div拖动(类似iGoogle)
- java + jquery-ui.sortable.js插件实现表格拖动排序
- jQuery UI sortable()实现拖动排序
- 使用jquery的sortable插件实现拖动效果,以及影响blur事件触发的解决方法
- 使用jquery-sortable交互工具和acts_as_list rubygem实现页面拖动排序
- jquery sortable实现table拖拽排序,更新时只更新受影响的行
- 通过jquery-ui中的sortable来实现拖拽排序的简单实例
- EasyUI + JQuery Sortable 实现可拖动工作台功能。
- jquery实现的鼠标拖动排序Li或Table
- JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小~!
- 通过jquery-ui中的sortable来实现拖拽排序
- 强大jQuery ui.ariaSorTable实现排序、分页的表格
- JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小~!
- jquery实现的鼠标拖动排序Li或Table
- 主页自定义可拖动组件 1.0版本 (jquery-ui-sortable)
- 用jQuery.ui.sortable实现拖拽排序
- 使用jquery的sortable插件实现拖动效果,以及影响blur事件触发的解决方法
- JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小~!
- [Asp.net]Calendar+JqueryUi实现日程管理——添加日程