注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

TableDnd(JQuery表格拖拽控件)应用进阶  

2014-07-14 14:03:32|  分类: 插件及效果类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

参考地址:http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

 

使用很简单:

Js代码  收藏代码
  1. $("#table").tableDnD();  

之后你的table的每一行就能够拖拽了,很cool,当然也有一些选项,事件,具体请看上面的链接。


下面就介绍几个实用的选项:

 

1.onDragClass(onDragStyle):拖拽时样式,我们在拖拽一个行时,为了醒目一般会给拖拽起来的行设置高亮,这个选项就可以设置在拖拽时为被拖拽的行增加的样式,拖拽结束后清除。

示例代码:

Js代码  收藏代码
  1. $("#table").tableDnD({  
  2.     onDragClass:'highlight'  
  3. });    

 

2.onDrop:拖拽结束事件函数,在拖拽结束后我们需要做一些处理时可以定义该函数。

示例代码:

Js代码  收藏代码
  1. $("#table").tableDnD({  
  2.     onDrop: function(){  
  3.           alert('done');  
  4.     }  
  5. });    

 

 

3.保持某一行不动:很多情况下,我们的表格是一行标题+多行数据的形式,如果直接使用tableDnD,很可能连标题行都可以被随便拖拽,或者数据行被拖拽到标题行上面去了-_-!,怎么解决这个问题呢?只需要给不能拖拽的行增加两个class:nodrop nodrag,示例代码:

Html代码  收藏代码
  1. <table id="table">  
  2. <tr class='nodrop nodrag'>  
  3.    <td>ID</td><td>Content</td>  
  4. </tr>  
  5. <tr>  
  6.     <td>1</td><td>sth.</td>  
  7. </tr>  
  8. <tr>  
  9.     <td>2</td><td>anything</td>  
  10. </tr>  
  11. <table>  

 

Js代码  收藏代码
  1. $('#table').tableDnD();  

 这样第一行是无法拖拽的,只能拖拽第二,三行,当然,你也可以用js为某一行增加这两个class,可以参考JQuery的addClass方法

  评论这张
 
阅读(338)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017