根据HTML5的新方法 drag & drop 方法实现表格拖拽实例
2024-09-22 05:18:20
上一次学习了html5的drag和drop方法,传送门 就自己写了个例子加深自己对drag和drop的理解。不过一开始不是很简单,遇到了不少问题。还好网络万能的,什么都能查到,总算完成了。
说明和详解都在代码里。
html和css代码如下:
<table>
<thead>
<tr>
<th>年龄</th>
<th>姓名</th>
<th>面试时间</th>
<th>面试类型</th>
<th>面试官</th>
<th>结论</th>
</tr>
</thead>
<tbody>
<tr>
<td>33</td>
<td >章三</td>
<td>2018-04-04</td>
<td>交互设计师</td>
<td>琪琪</td>
<td>待查</td>
</tr>
<tr>
<td>20</td>
<td >李四</td>
<td>2018-03-07</td>
<td>前端工程师</td>
<td>悠悠</td>
<td></td>
</tr>
<tr>
<td>24</td>
<td >王五</td>
<td>2018-04-10</td>
<td>java工程师</td>
<td>懒懒</td>
<td></td>
</tr>
<tr>
<td>18</td>
<td >六六</td>
<td>2018-03-05</td>
<td>UI设计师</td>
<td>张施</td>
<td>通过</td>
</tr>
<tr>
<td>21</td>
<td >刘灿</td>
<td>2018-04-14</td>
<td>交互设计师</td>
<td>琪琪</td>
<td>通过</td>
</tr>
<tr>
<td>28</td>
<td >李江</td>
<td>2018-03-27</td>
<td>前端工程师</td>
<td>悠悠</td>
<td></td>
</tr>
<tr>
<td>22</td>
<td >王雷</td>
<td>2018-03-30</td>
<td>java工程师</td>
<td>懒懒</td>
<td></td>
</tr>
<tr>
<td>25</td>
<td >刘哲</td>
<td>2018-03-16</td>
<td>UI设计师</td>
<td>张施</td>
<td>通过</td>
</tr>
</tbody>
</table>
javascript代码如下:
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
$('thead th').attr('draggable',true); // 将表格th声明为可拖拽 $('thead th').on('dragstart',function(ev){
// 被拖数据的数据类型和值
ev.originalEvent.dataTransfer.setData("Text", ev.currentTarget.cellIndex);
}) $('thead th').on('dragover',function(ev){
// 阻止默认行为
ev.preventDefault();
}) $('thead th').on('drop',function(ev){
// 阻止默认行为
ev.preventDefault();
// 获取被拖的数据的索引
var id = ev.originalEvent.dataTransfer.getData("Text");
// 当前要放下的索引
var Id = this.cellIndex;
// 存储点击的this
var that = this;
// 遍历th
$('thead th').each(function(){
// 获取遍历的每一个th,这个this和点击的this不一样
var _this = this;
// 当遍历的每一个th的索引和被拖拽的索引一致时,重构
if(_this.cellIndex == id){
if(id > Id){
that.before(_this);
}else{
that.after(_this);
}
}
})
// 遍历tbody的tr
$('tbody tr').each(function(i){
// 提供一个容器,分别用来存储原位置的一列和被拖拽的一列
var box1 = "";
var box2 = "";
// 遍历tr中的td
$(this).children('td').each(function(){
// 存储原位置的一列
if(this.cellIndex == Id){
box1 = this;
}
// 存储被拖拽的一列
if(this.cellIndex == id){
box2 = this;
}
})
if(id > Id){
box2.after(box1);
}else{
box2.before(box1);
}
})
})
遇到的问题:
1 setData获取不到,报错。
原因:因为是参数ev是被jquery封装的,而不是自身原生的,要获取就按 ev.originalEvent.dataTransfer.setData()。
2 不是所有的事件方法都要有ev.preventDefault();这样也会阻止本身自己写的方法。
3 在遍历tbody的td时,没有想到怎么按照顺序放置拖拽和原位置,同事解答之后,才知道需要一个容器去存储。
大家对这个实例如果有问题或者有更好的办法,请评论或私信,一起进步。
参考资料:
1 http://www.cnblogs.com/sqh17/p/8676983.html
最新文章
- 对session的理解
- hadoop(2014/0619)
- msdn webcast 下载地址整理
- OD使用教程5
- MVC 生成图片,下载文件
- excel列递增方法技巧
- Jenkins进阶系列之——03parameterized-trigger插件
- FLASH CC 2015 CANVAS (七)总结
- 前端页面js与flash交互——js获取flash对象,并传递参数
- Linux Kernel Schduler History And Centos7.2&#39;s Kernel Resource Analysis
- Android:OptionMenu
- C语言程序设计第一作业
- java中的Collection集合类
- BZOJ3052(树上带修莫队)
- Neutron Vlan Network 学习
- .Net 调用中国气象台Web Service
- day26_python_1124
- linux命令重定向>;、>;>;、 1>;、 2>;、 1>;>;、 2>;>;、 <;
- PLSQL Developer概念学习系列之登录连接Oracle时出现(没有登录) -PL / SQL Developer:ORA - 12541: TNS :无建听程序的错误解决办法(图文详解)
- 数据同步canal客户端