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
So erstellen Sie https mit Nginx und dem kostenlosen Tencent Cloud-Zertifikat
Ich habe gelernt, wie man https bekommt. Kürzlich...
Ausführliche Erklärung zur Docker-Maschine
Unterschiede zwischen Docker und Docker Machine D...
Einstellungen für den Ubuntu-Boot-Autostart-Dienst
So erstellen Sie einen Dienst und starten ihn aut...
Vant+postcss-pxtorem implementiert Browser-Anpassungsfunktion
Rem-Layout-Anpassung Die Stile in Vant verwenden ...
Implementierung zum Zeichnen einer Audio-Wellenform mit wavesurfer.js
1. Sehen Sie sich die Renderings an Weiterleiten ...
So implementieren Sie das mobile Anmelde- und Registrierungsmodul elegant in vue3
Inhaltsverzeichnis Vorwort Eingabefeldkomponente ...
Lösung zum Vergessen des Passworts des Pagodenpanels in Linux 3.X/4.x/5.x
Geben Sie ssh ein und geben Sie den folgenden Bef...
Implementierung von Docker zum Aufbau eines privaten Warehouse (Registrierung und Harbor)
Da immer mehr Docker-Images verwendet werden, mus...
Detaillierte Erklärung des Mindestbreitenwerts von Inline-Blöcken in CSS
Vorwort Vor kurzem habe ich mir abends etwas Zeit...
Lösung für das Problem des IP-Verlusts durch das Kopieren der virtuellen Centos8-Maschine unter VMWARE
Nach der Installation eines Centos8-Dienstes unte...
Detaillierte Erläuterung der MySQL-Zeilensperren beim Auftreten zusammengesetzter Primärschlüssel und mehrspaltiger Indizes
Hintergrund Als ich heute mit anderen Projektteam...
Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff
Um mehrere Sites auf einem Server bereitzustellen...
Detaillierte Erklärung des Docker-Befehls zum Sichern des Linux-Systems
Tar-Backup-System sudo tar cvpzf backup.tgz --exc...
Meta-Tags einfach erklärt
Der META-Tag, umgangssprachlich auch als Tag beze...
Detaillierte Erläuterung des Replikationskonfigurationsbeispiels zwischen MySQL-Containern
Hintergrund Letzte Woche hat das Unternehmen eine...