js 表格拖拽
时间: 2023-07-06 17:08:11 浏览: 60
你可以使用 HTML5 中的拖拽 API 来实现表格拖拽。具体步骤如下:
1. 给表格中的每个单元格添加 draggable 属性,以使其具有可拖拽性。
```html
<table>
<tr>
<td draggable="true">单元格 1</td>
<td draggable="true">单元格 2</td>
<td draggable="true">单元格 3</td>
</tr>
<tr>
<td draggable="true">单元格 4</td>
<td draggable="true">单元格 5</td>
<td draggable="true">单元格 6</td>
</tr>
</table>
```
2. 监听每个单元格的 dragstart 事件,以便在拖动开始时保存被拖动单元格的数据。
```js
var draggedData;
document.addEventListener('dragstart', function(event) {
draggedData = event.target.innerHTML;
});
```
3. 监听表格的 drop 事件,以便在放置单元格时交换数据。
```js
document.addEventListener('drop', function(event) {
event.preventDefault();
if (event.target.tagName === 'TD') {
var targetData = event.target.innerHTML;
event.target.innerHTML = draggedData;
event.dataTransfer.setData('text/html', targetData);
}
});
```
完整代码示例:
```html
<table>
<tr>
<td draggable="true">单元格 1</td>
<td draggable="true">单元格 2</td>
<td draggable="true">单元格 3</td>
</tr>
<tr>
<td draggable="true">单元格 4</td>
<td draggable="true">单元格 5</td>
<td draggable="true">单元格 6</td>
</tr>
</table>
<script>
var draggedData;
document.addEventListener('dragstart', function(event) {
draggedData = event.target.innerHTML;
});
document.addEventListener('dragover', function(event) {
event.preventDefault();
});
document.addEventListener('drop', function(event) {
event.preventDefault();
if (event.target.tagName === 'TD') {
var targetData = event.target.innerHTML;
event.target.innerHTML = draggedData;
event.dataTransfer.setData('text/html', targetData);
}
});
</script>
```
相关推荐
![](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)