本文实例为大家分享了js拖拉表格实现内容计算的具体代码，供大家参考，具体内容如下
前言
制作网页版 Excel H5 新增功能：可拖拉- draggable , 可编辑- contenteditable实现结果
代码实现
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/u013362192/article/details/115837290
dy("nrwz");