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
Reagieren Sie auf den nativen ScrollView-Pulldown-Aktualisierungseffekt
In diesem Artikel wird der spezifische Code des P...
So erstellen Sie einen Trigger in MySQL
In diesem Artikelbeispiel wird der spezifische Co...
Einführung in 10 Hooks in React
Inhaltsverzeichnis Was ist ReactHook? React biete...
So verschieben Sie ein rotes Rechteck mit der Maus im Linux-Zeichenterminal
Alles ist eine Datei! UNIX hat es bereits gesagt....
React-Diagramm Serialisierung JSON Interpretation Fallanalyse
Das Ziel dieses Dokuments ist es, die JSON-Serial...
Implementierung eines Puzzlespiels mit js
In diesem Artikel wird der spezifische Code von j...
Installieren Sie die virtuelle CentOS7-Maschine unter Win10
1. Laden Sie die VMware Workstation 64-Version he...
So lösen Sie das Problem zu vieler geöffneter Dateien in Linux
Die Ursache liegt darin, dass der Prozess zu eine...
Mit JS in zehn Minuten die Existenz von Elementen in einem Array bestimmen
Vorwort In der Front-End-Entwicklung müssen Sie h...
Popularisierung der Theorie – Benutzererfahrung
1. Konzeptanalyse 1: UE User Experience <br /&...
JS+Canvas zeichnet ein Glücksrad
In diesem Artikel wird der spezifische Code der J...
CSS Acht auffällige HOVER-Effekt-Beispielcodes
1. Effekt-HTML senden <div id="senden-btn...
Erklären, wie die SQL-Effizienz analysiert wird
Der Befehl „Explain“ ist der erste empfohlene Bef...
Verwenden von react-virtualized zum Implementieren einer langen Liste von Bildern mit dynamischer Höhe
Inhaltsverzeichnis Während der Entwicklung aufget...
Lösung für das Problem, dass Nacos keine Verbindung zu MySQL herstellen kann
Grund Die MySQL-Version, von der Nacos‘ POM abhän...