-
Notifications
You must be signed in to change notification settings - Fork 16
/
dragAnddrop.html
178 lines (170 loc) · 4.57 KB
/
dragAnddrop.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td,th{
width: 250px;
text-align: center;
border: 1px solid #000;
}
th {
background: #ccc
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<ul class="btn">
<li class="current">2年龄</li>
<li>2姓名</li>
<li class="current">3面试时间</li>
<li class="current">4面试类型</li>
<li>5面试官</li>
<li>6结论</li>
</ul>
<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>
<script>
// 隐藏和显示
$('li').on('click',function(){
var index = $(this).index()
$('thead').find('th').eq(index).toggle()
$('tbody tr').each(function(){
$(this).find('td').eq(index).toggle()
})
})
$('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);
}
})
})
</script>
</body>
</html>