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
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:
|
<<: Detaillierte Erklärung zum Mounten von Remote-Dateisystemen über SSH unter Linux
>>: MySQL-Batch entfernt Leerzeichen in einem bestimmten Feld
Artikel empfehlen
So verwenden Sie benutzerdefinierte CSS-Variablen in Vue
Inhaltsverzeichnis Die benutzerdefinierte CSS-Var...
Eine schnelle Lösung für das Problem des automatischen Zeilenumbruchs in Tabellenüberschriften im Responsive Framework
Ich habe kürzlich Bootstrap zum Entwickeln einer ...
Detaillierte Erklärung zum Schreiben mehrerer Bedingungen von CSS: nicht
Der Pseudoklassenselektor :not kann Elemente filt...
Eine kurze Diskussion über HTML-Dokumenttypen und -Kodierung
DOKTYP Doctype wird verwendet, um dem Browser mit...
Detailliertes Tutorial zur Verwendung von Docker zum Erstellen von Gitlab basierend auf dem CentOS8-System
Inhaltsverzeichnis 1. Docker installieren 2. Inst...
Allgemeiner HTML-Seitenstil (empfohlen)
Wie unten dargestellt: XML/HTML-CodeInhalt in die...
Detaillierte MySQL-CRUD-Anweisungen zum Hinzufügen, Löschen, Ändern und Abfragen einer einzelnen Tabelle
MySQL-Anweisungen zum Hinzufügen, Löschen, Ändern...
Detailliertes Tutorial zur Tomcat-Installation und -Bereitstellung in Windows 10
Inhaltsverzeichnis 1 Konfiguration der Java-Umgeb...
Beispiel für Auslassungspunkte bei Überlauf von mehrzeiligem CSS-Text
Auslassungspunkte werden angezeigt, wenn mehrzeil...
Detaillierte Erklärung, wo die von Docker abgerufenen Bilder gespeichert werden
Die vom Docker abgerufenen Befehle werden standar...
Docker-Fallanalyse: Erstellen eines MySQL-Datenbankdienstes
Inhaltsverzeichnis 1 Konfigurations- und Datenver...
Nach dem Absenden des HTML-Dropdown-Menüs bleibt der ausgewählte Wert erhalten, anstatt auf den Standardwert zurückzusetzen
Code kopieren Der Code lautet wie folgt: <html...
Wie versteht JS Daten-URLs?
Inhaltsverzeichnis Überblick Erste Schritte mit D...
Implementierung von React-Loop-Daten (Liste)
Lassen Sie uns zunächst die Daten simulieren, die...
Eine kurze Diskussion über die maximale Anzahl geöffneter Dateien für MySQL-Systembenutzer
Was Sie aus Büchern lernen, ist immer oberflächli...