js 表格拖拽排序
时间: 2023-07-01 19:10:18 浏览: 60
实现表格拖拽排序可以使用HTML5中的drag和drop事件,以及JavaScript的相关操作。以下是一个示例代码:
HTML部分:
```html
<table id="sortable-table">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>国籍</th>
</tr>
</thead>
<tbody>
<tr draggable="true">
<td>1</td>
<td>张三</td>
<td>25</td>
<td>中国</td>
</tr>
<tr draggable="true">
<td>2</td>
<td>李四</td>
<td>30</td>
<td>美国</td>
</tr>
<tr draggable="true">
<td>3</td>
<td>王五</td>
<td>28</td>
<td>英国</td>
</tr>
</tbody>
</table>
```
JavaScript部分:
```javascript
// 获取表格和表格行
var table = document.getElementById('sortable-table');
var rows = table.querySelectorAll('tr');
// 设置表格行的拖放事件监听
rows.forEach(function(row) {
row.addEventListener('dragstart', dragstart);
row.addEventListener('dragenter', dragenter);
row.addEventListener('dragover', dragover);
row.addEventListener('dragleave', dragleave);
row.addEventListener('drop', drop);
row.addEventListener('dragend', dragend);
});
var dragSrcEl = null;
function dragstart(e) {
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function dragenter(e) {
this.classList.add('over');
}
function dragover(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function dragleave(e) {
this.classList.remove('over');
}
function drop(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
function dragend(e) {
rows.forEach(function(row) {
row.classList.remove('over');
});
}
```
在上述代码中,通过获取表格和表格行,然后为每一行设置拖放事件监听。当拖动某一行时,会触发对应的事件处理函数,进行相应的操作。
具体实现过程如下:
1. 在拖动开始时,记录下当前拖动的表格行(即dragSrcEl),同时设置拖放效果为move,将当前行的innerHTML设置为拖动的数据(text/html);
2. 当拖动进入其他表格行时,添加over类,用于样式的变化;
3. 在拖动过程中,防止浏览器默认行为,同时设置拖放效果为move;
4. 当拖动离开某个表格行时,移除over类;
5. 当拖放完成时,如果拖动的行不是当前行,则交换两行的innerHTML;
6. 最后,移除所有表格行的over类。
通过以上实现,即可实现简单的表格拖拽排序功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)