js Drag & Drop-Tabelle zur Realisierung der Inhaltsberechnung

In diesem Artikelbeispiel wird der spezifische Code der JS-Drag-and-Drop-Tabelle zur Realisierung der Inhaltsberechnung als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Vorwort

Erstellen einer Webversion von Excel
Neue Funktionen von H5 : verschiebbar , inhaltsbearbeitbar

Ergebnisse erzielen

Code-Implementierung

Hauptseite

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Tabelle</title>
    <Stil>
        Tabelle, th, tr, td {
            Rand: 0;
            Polsterung: 0;
            Breite: 800px;
            Textausrichtung: zentriert;
            Rand: durchgezogen 1px #000;
        }

        td {
            Breite: automatisch;
            Hintergrundfarbe: rosa;
        }
        .ops {
            Cursor: bewegen;
        }
    </Stil>
</Kopf>
<Text>
<Tabellen-ID="Tabelle">
    <thead id="thead">
    <tr id="header">
        <th>1</th>
    </tr>
    </thead>
    <tbody-ID="tbody">

    </tbody>
</Tabelle>
<script src="main.js"></script>
</body>
</html>

Haupt-JS

Tabelle erstellen(10,10);
init();
// Tabelleninitialisierung // @param1: rows, Anzahl der Zeilen // @param2: cols, Anzahl der Spalten function createTable(rows, cols) {
    let header = document.getElementById('header'),
        Textkörper = Dokument.getElementById('tbody');

    für (sei i = 0; i < Zeilen; i ++) {
        lass tmp = '',
            trEle = document.createElement('tr');
        für (sei j = 0; j < cols; j++) {
            //Kopf
            wenn (i <= 1){
                tmp += `<th>${j}</th>`;
            }
            anders {
                tmp += `<td class="ops" draggable="true">${i}</td>`;
            }
        }
        // konsole.log(tmp);
        wenn (i <= 1) header.innerHTML = tmp;
        anders{
            trEle.innerHTML = tmp;
            body.appendChild(trEle);
        }
    }
}

/*
*Tabelle ziehen * */
Funktion init(){
    sei x, y, Daten;
    document.body.addEventListener('klicken', event=>{
        event.preventDefault();
    });

    document.body.addEventListener('dragstart', Ereignis => {
        wenn (event.target.nodeName.toLowerCase() !== 'td'){
            alert('Wählen Sie den richtigen Inhalt aus');
            gibt false zurück;
        }

        // console.log(Ereignis);
        x = event.clientX - 5,
        y = event.clientY - 5,
        Daten = parseInt(Ereignis.Ziel.erstesKind.Daten);
        let img = neues Bild();
        img.src = "test.png";
        event.dataTransfer.setDragImage(img, 0,0);
        // konsole.log(x, y, Daten);
    });

    //Standardmäßige Verarbeitung verhindern document.body.addEventListener('dragover', event => {
        event.preventDefault();
    });

    Dokument.body.addEventListener('drop', Ereignis => {
        let tmp = neue dragCalculation(x,y,data);
        let endX = event.clientX - 5,
            endY = event.clientY - 5,
            endData = parseInt(event.target.firstChild.data);
        // Konsole.log(Ereignis.Ziel.erstesKind.Daten);
        // konsole.log(isNaN(endData))
        wenn (isNaN(endData)) {
            alert('Fehler bei der Bewegungsposition');
            gibt false zurück;
        }
        // konsole.log(endX, endY, endData);
        let result = tmp.sum(endX, endY, endData);
        event.target.firstChild.data = Ergebnis;
        event.target.style.backgroundColor = "#b4e318"

    });
}

let dragCalculation = Funktion (x, y, Daten) {
    dies.startX = x;
    dies.startY = y;
    this.startData = Daten;
};

dragCalculation.prototype.sum = Funktion (x, y, Daten) {
    // Sollte eine detaillierte Grenzwertbeurteilung erfolgen, wenn (this.startX == x ||
    dies.startY == y ||
    isNaN(Daten)) {
        alert('Lass es nicht dort');
        gibt false zurück;
    }

// Daten abrufen und zurückgeben + this.startData;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: