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
Unterschied zwischen den Methoden querySelector und getElementById in JS
Inhaltsverzeichnis 1. Übersicht 1.1 Verwendung vo...
Popularisierung der Theorie – Benutzererfahrung
1. Konzeptanalyse 1: UE User Experience <br /&...
Schritte zum Kapseln der Karussellkomponente in vue3.0
Inhaltsverzeichnis 1: Kapselungsidee 2. Verpackun...
Grundlegendes Verständnis und Verwendung der HTML-Auswahloption
Detaillierte Erklärung von HTML (Option auswählen)...
JS realisiert Bild Digitaluhr
In diesem Artikelbeispiel wird der spezifische JS...
Tutorial zur Installation und Konfiguration der Version MySQL 5.7.23
Ich habe drei Stunden gebraucht, um MySQL selbst ...
Natives JavaScript-Message Board
In diesem Artikel wird der spezifische JavaScript...
Detailliertes Tutorial zur Installation und Bereitstellung von Nginx Linux
1. Einführung in Nginx Nginx ist ein Webserver, d...
Tiefgreifendes Verständnis des Statusübergangs des MySQL-Master-Slave-Replikationsthreads
Vorwort Das Grundprinzip der MySQL-Master-Slave-R...
Die Verwendung eines eindeutigen MySQL-Schlüssels in Abfragen und damit verbundene Probleme
1. Tabellenanweisung erstellen: CREATE TABLE `Mit...
Ausführliche Erläuterung der MySQL-Isolationsebene und des Sperrmechanismus
Inhaltsverzeichnis Kurzbeschreibung: 1. Vier Merk...
Der Unterschied zwischen MySQL execute, executeUpdate und executeQuery
Die Unterschiede zwischen „execute“, „executeUpda...
So erstellen Sie ein responsives Säulendiagramm mit dem CSS-Rasterlayout
Ich spiele jetzt schon eine Weile mit Diagrammen ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27
Detailliertes Download-, Installations- und Konfi...
Lassen Sie uns über Destrukturierung in JS ES6 sprechen
Überblick es6 fügt eine neue Möglichkeit hinzu, b...