js implementiert Tabellen-Drag-Optionen
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung der Tabellen-Drag-Option zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Die Anforderungen des Themas sind in der folgenden Abbildung dargestellt. Die konkrete Idee ist: Ziehen, um das Auswahlelement zu ändern, und das verwendete Ereignis ist das js-Drag-bezogene Ereignis.
Code:
<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="Ansichtsfenster"
content="Breite=Gerätebreite, benutzerdefiniert skalierbar=nein, Anfangsmaßstab=1,0, Maximalmaßstab=1,0, Minimalmaßstab=1,0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
ul,li{
Listenstil: keiner;
Cursor: Zeiger;
}
.specWrap{
Breite: 800px;
Rand: 0 automatisch;
Benutzerauswahl: keine;
}
.Spezifikation{
Rand: 1px durchgezogen #ccc;
Breite: 100 %;
Position: relativ;
}
.sp-top{
Höhe: 60px;
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
Box-Größe: Rahmenbox;
}
.sp-top ul{
Überlauf: versteckt;
}
.sp-top ul li{
Breite: 33%;
Schwimmer: links
}
.sp-top ul li:nth-of-type(2){
Rahmen links: 1px durchgezogen #ccc;
Rahmen rechts: 1px durchgezogen #ccc;
}
.sp-cen{
Textausrichtung: links;
Box-Größe: Rahmenbox;
Rahmen unten: 1px durchgezogen #ccc;
Rahmen oben: 1px durchgezogen #ccc;
Texteinzug: 20px;
Überlauf: versteckt;
}
.Bildschirm{
Breite: 33%;
schweben: links;
}
.screen:n-ter-Typ(2){
Rahmen links: 1px durchgezogen #ccc;
Rahmen rechts: 1px durchgezogen #ccc;
}
.sp-btm{
Textausrichtung: links;
Box-Größe: Rahmenbox;
Texteinzug: 20px;
Überlauf: versteckt;
}
.Auflösung{
Breite: 33%;
schweben: links;
}
.Auflösung:n-ter-Typ(2){
Rahmen links: 1px durchgezogen #ccc;
Rahmen rechts: 1px durchgezogen #ccc;
}
.btn{
schweben: rechts;
Breite: 60px;
Rand: 20px 0;
}
</Stil>
</Kopf>
<Text>
<div Klasse="specWrap">
<div class="Spezifikation">
<div Klasse="sp-top">
<ul>
<li>SPEZIFIKATIONEN</li>
<li>LEVELS-Spezifikationen</li>
<li>AUSGEWÄHLT</li>
</ul>
</div>
<div Klasse="sp-cen">
<div Klasse="Bildschirm">
<p>Bildschirmgröße</p>
</div>
<div Klasse="Bildschirm">
<ul Klasse="Größe">
<li>4</li>
<li>4,5</li>
<li>5</li>
<li>5,5</li>
<li>6</li>
<li>6,5</li>
</ul>
</div>
<div Klasse="Bildschirm sc"></div>
</div>
<div Klasse="sp-btm">
<div Klasse="Auflösung">
<p>Bildschirmauflösung</p>
</div>
<div Klasse="Auflösung">
<ul Klasse="Auflösung">
<li>Hohe Auflösung (720p)</li>
<li>Full HD (1080p)</li>
<li>Quad-HD (2K) Quad-HD (2K)</li>
<li>Ultra HD (4K)</li>
</ul>
</div>
<div class="Auflösung re"></div>
</div>
</div>
<div>
<button class="btn">Senden</button>
</div>
</div>
</body>
<Skript>
var size = document.getElementsByClassName('size')[0].children; //Größenliste var resolu = document.getElementsByClassName('resolu')[0].children; //Auflösungsliste var specWrap = document.getElementsByClassName('specWrap')[0];
for(let i=0;i<size.length;i++){ //Größe wählt size[i].function (e) { //Presseereignis for(var i=0;i<size.length;i++){
Größe[i].Stil.Position='';
Größe[i].stil.hintergrund='';
}
var e=e||Ereignis;
var lf=e.offsetX;
var tp=e.offsetY;
var aktuell=dies;
aktueller.Stil.Position='absolut';
document.function(e){ //mobiles Ereignis var e=e||event;
var x=e.clientX-specWrap.offsetLeft-lf;
var y=e.clientY-specWrap.offsetTop-tp;
aktueller.Stil.links=x+'px';
aktueller.Stil.oben=y+'px';
}
document.function(){ //Maus loslassen-Ereignis document.null;
document.getElementsByClassName('sc')[0].innerHTML=current.innerHTML;
aktuelle.Stil.Position='';
}
}
}
for(let i=0;i<resolu.length;i++){ //Auflösungsauswahl, Sie können den Code kapseln, ich werde ihn hier nicht kapseln resolu[i].function (e) {
für(var i=0;i<Auflösung.Länge;i++){
Auflösung[i].style.position='';
resolu[i].style.background='';
}
var e=e||Ereignis;
var lf=e.offsetX;
var tp=e.offsetY;
var aktuell=dies;
aktueller.Stil.Position='absolut';
aktueller.Stil.zIndex=6;
Dokument.Funktion(e){
var e=e||Ereignis;
var x=e.clientX-specWrap.offsetLeft-lf;
var y=e.clientY-specWrap.offsetTop-tp;
aktueller.Stil.links=x+'px';
aktueller.Stil.oben=y+'px';
}
Dokument.Funktion(){
dokument.null;
document.getElementsByClassName('re')[0].innerHTML=current.innerHTML;
aktuelle.Stil.Position='';
}
}
}
</Skript>
</html>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:
|
<<: So verbessern Sie die Sicherheit von Linux- und Unix-Servern
>>: Analysieren Sie das Auswahlproblem beim Speichern von Zeit- und Datumstypen in MySQL
Artikel empfehlen
WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}
Vorwort Bei der WeChat-Applet-Entwicklung (native...
HTML-Grundlagen - CSS-Stylesheets, Style-Attribute, Format- und Layoutdetails
1. Position : fest Gesperrte Position (relativ zu...
Detailliertes Beispiel der Lesegeschwindigkeit von JS-Objekten
1. Der Zugriff auf Literale und lokale Variablen ...
So testen Sie die maximale Anzahl von TCP-Verbindungen in Linux
Vorwort Es besteht ein Missverständnis bezüglich ...
Implementierung der Einstellungen für virtuellen Nginx-Host basierend auf Domänenname, Port und unterschiedlicher IP
1. Einrichten des virtuellen Nginx-Hosts Mit virt...
Erste Schritte mit der Konvertierung von Vue in React
Inhaltsverzeichnis Design Komponentenkommunikatio...
Beispiel für eine adaptive CSS-Bildschirmgrößenimplementierung
Um eine CSS-Bildschirmgrößenanpassung zu erreiche...
Tutorial zur Installation und Konfiguration von MySQL 5.7
In diesem Artikel finden Sie das Tutorial zur Ins...
Tipps zum Erstellen von Web-Tabellenrahmen
<br />Tipps zum Erstellen von Web-Tabellenra...
Ein Leitfaden zum Schreiben flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codestandards
Die goldene Regel Befolgen Sie immer die gleichen...
Detaillierte Erklärung zur Verwendung des Grep-Befehls in Linux
Linux-Grep-Befehl Mit dem Linux-Befehl grep könne...
Drei häufig verwendete MySQL-Datentypen
Das Definieren des Datenfeldtyps in MySQL ist für...
So verwenden Sie die Lodop-Drucksteuerung in Vue, um browserkompatibles Drucken zu erreichen
Vorwort Dieses Steuerelement weist beim direkten ...
MySQL 8.0.19 WinX64-Installations-Tutorial und Ändern des Initialpassworts unter Windows 10
In diesem Artikel finden Sie das Installations-Tu...
Beispiel für die Umsetzung eines 2-spaltigen Layouts in HTML (links feste Breite, rechts adaptive Breite)
HTML implementiert ein 2-spaltiges Layout mit fes...