js drag and drop table to realize content calculation

This article example shares the specific code of js drag-and-drop table to realize content calculation for your reference. The specific content is as follows

Preface

Create a web version of Excel
H5 new features: draggable , contenteditable

Achieve Results

Code Implementation

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();
// Table initialization // @param1: rows, number of rows // @param2: cols, number of columns 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);
        }
    }
}

/*
* Table drag * */
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('Select the correct content');
            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);
    });

    //Prevent default processing 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('Move position error');
            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) {
    // Should be detailed boundary judgment if (this.startX == x ||
    this.startY == y ||
    isNaN(data)) {
        alert('Don't leave it there');
        return false;
    }

// Get and return data + this.startData;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: