js如何同时拖拽多个表格
时间: 2023-09-10 20:05:15 浏览: 51
可以通过以下步骤来实现同时拖拽多个表格:
1. 给每个表格添加一个拖拽事件处理程序。
2. 在拖拽开始时,记录每个表格的初始位置。
3. 在拖拽过程中,计算每个表格的偏移量,并将其移动到新的位置。
4. 在拖拽结束时,更新每个表格的位置。
以下是实现这个功能的示例代码:
```javascript
var tables = document.querySelectorAll('table');
var dragging = false;
var startX, startY;
var offsetX = [], offsetY = [];
// 给每个表格添加拖拽事件处理程序
for (var i = 0; i < tables.length; i++) {
tables[i].addEventListener('mousedown', function(e) {
startX = e.clientX;
startY = e.clientY;
dragging = true;
// 记录每个表格的初始位置
for (var j = 0; j < tables.length; j++) {
offsetX[j] = parseInt(tables[j].style.left) || 0;
offsetY[j] = parseInt(tables[j].style.top) || 0;
}
});
tables[i].addEventListener('mouseup', function(e) {
dragging = false;
// 更新每个表格的位置
for (var j = 0; j < tables.length; j++) {
tables[j].style.left = (offsetX[j] + e.clientX - startX) + 'px';
tables[j].style.top = (offsetY[j] + e.clientY - startY) + 'px';
}
});
}
document.addEventListener('mousemove', function(e) {
if (dragging) {
// 计算每个表格的偏移量,并将其移动到新的位置
for (var i = 0; i < tables.length; i++) {
tables[i].style.left = (offsetX[i] + e.clientX - startX) + 'px';
tables[i].style.top = (offsetY[i] + e.clientY - startY) + 'px';
}
}
});
```
这个示例代码假设每个表格的初始位置为(0, 0),如果表格的初始位置不同,则需要相应地修改偏移量的计算方法。