前言
实现结果
代码实现
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<style>
table, th, tr, td {
margin: 0;
padding: 0;
width: 800px;
text-align: center;
border: solid 1px #000;
}
td {
width: auto;
background-color: pink;
}
.ops {
cursor: move;
}
</style>
</head>
<body>
<table id="table">
<thead id="thead">
<tr id="header">
<th>1</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<script src="main.js"></script>
</body>
</html>
main.js
createTable(10,10);
init();
// 表格初始化
// @param1: rows, 行数
// @param2: cols, 列数
function createTable(rows, cols) {
let header = document.getElementById('header'),
body = document.getElementById('tbody');
for (let i = 0; i < rows; i ++){
let tmp = '',
trEle = document.createElement('tr');
for (let j = 0; j < cols; j ++){
//thead
if (i <= 1){
tmp += `<th>${j}</th>`;
}
else {
tmp += `<td class="ops" draggable="true">${i}</td>`;
}
}
// console.log(tmp);
if (i <= 1) header.innerHTML = tmp;
else{
trEle.innerHTML = tmp;
body.appendChild(trEle);
}
}
}
/*
* 表格拖拽
* */
function init(){
let x,y,data;
document.body.addEventListener('click', event=>{
event.preventDefault();
});
document.body.addEventListener('dragstart', event => {
if (event.target.nodeName.toLowerCase() !== 'td'){
alert('选择正确的内容');
return false;
}
// console.log(event);
x = event.clientX - 5,
y = event.clientY - 5,
data = parseInt(event.target.firstChild.data);
let img = new Image();
img.src = 'test.png';
event.dataTransfer.setDragImage(img, 0,0);
// console.log(x, y, data);
});
//阻止默认处理
document.body.addEventListener('dragover', event => {
event.preventDefault();
});
document.body.addEventListener('drop', event => {
let tmp = new dragCalculation(x,y,data);
let endX = event.clientX - 5,
endY = event.clientY - 5,
endData = parseInt(event.target.firstChild.data);
// console.log(event.target.firstChild.data);
// console.log(isNaN(endData))
if (isNaN(endData)) {
alert('移动位置错误');
return false;
}
// console.log(endX, endY, endData);
let result = tmp.sum(endX, endY, endData);
event.target.firstChild.data = result;
event.target.style.backgroundColor = '#b4e318'
});
}
let dragCalculation = function (x, y, data){
this.startX = x;
this.startY = y;
this.startData = data;
};
dragCalculation.prototype.sum = function (x, y, data) {
//应该详细的边界判断
if (this.startX == x ||
this.startY == y ||
isNaN(data)) {
alert('不要放在原地不动');
return false;
}
// 取和
return data + this.startData;
}
