Native js realisiert das Ziehen und Ablegen des Neun-Quadrat-Rasters
|
Verwenden Sie natives JS, um ein neuneckiges Raster zu schreiben, um den Effekt des Ziehens und Änderns der Position der neun Raster zu erzielen. Zu Ihrer Information lautet der spezifische Inhalt wie folgt Effektdemonstration
Konkrete Ideenanalyse und Code: Diagramm 1:
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<!--
Gedanken:
1. Stileinstellung: Am besten verwenden Sie die Positionierung für das Layout im Stil, da es sonst später beim Ziehen und Ablegen des Codes mühsam wird.
(Die spezifische Position des übergeordneten Containers wird hier nicht festgelegt. Wenn die spezifische Position des übergeordneten Containers festgelegt ist, müssen die oberen und linken Werte entsprechend der Situation beim Verschieben berechnet werden.)
2. Der Inhalt im übergeordneten Containerfeld wird am besten mit JS-Code generiert, was die Verwendung und das Hinzufügen von Stilen erleichtert. 2-1: (untergeordnete Elemente in einer Schleife generieren)
Es ist nicht schwer zu erkennen, dass das von unseren untergeordneten Elementen verwendete Positionierungslayout wie folgt lautet: Der obere Wert jeder Zeile ist derselbe und der linke Wert jeder Spalte ist derselbe. Um eine Schleife zum Generieren untergeordneter Elemente zu erstellen, können wir daher eine 3 * 3-verschachtelte Schleife verwenden, um sie zu schreiben, sodass wir den Stil jeder Zeile festlegen können.
2-2: (Fügen Sie den von der Schleife generierten Beschriftungen zufällige Farben und Texte hinzu)
Ich verwende rgb(), um zufällige Farben zu implementieren. Text kann mithilfe von ASCII-Code oder Zeichenfolgenverkettung generiert werden. Ich verwende hier ASCII-Code.
PS: Nachdem unser grundlegender Stil nun festgelegt ist, besteht der nächste Schritt darin, das Drag-Ereignis 3 festzulegen und jedem Element Ereignisse hinzuzufügen. Hier benötigen wir drei Ereignisse: onmousedown - onmousemove - onmouseup
3-1: (Drücken Sie zuerst das Ereignis „onmousedown“)
Wenn wir das entsprechende untergeordnete Element drücken, müssen wir den Abstand von der Maus zur Randlinie des gedrückten Ziels ermitteln und das Element klonen.
Wirf dieses Element als Platzhalter in den übergeordneten Container. (Beachten Sie, dass der geklonte Knoten in der HTML-Struktur an letzter Stelle steht. Wenn er nicht behandelt wird, tritt später ein Fehler auf!!!)
3-2: (Behandeln Sie dann das Bewegungsereignis onmousemove)
Wenn wir den untergeordneten Elementblock drücken und verschieben, müssen wir die oberen und linken Werte des Ziels festlegen, um eine Folgebewegung zu erreichen. Daher müssen wir den Abstand von der Maus zum sichtbaren Fenster ermitteln. Die oberen und linken Werte des Ziels = Abstand von der Maus zum sichtbaren Fenster - Abstand von der Maus zum Rand des Ziels (hier gibt es keinen Rand. Wenn nötig, subtrahieren Sie die Randbreite).
PS:
Hier liegt ein FEHLER vor! ! ! ! Beim Ziehen gibt es ein Standardereignis – ausgewählten Text. Wenn Sie es loslassen, bewegt sich das Ziel weiter, auch wenn Sie das Ereignis onmousemove deaktivieren. Also müssen wir hier das Standardereignis verhindern.
3-3: (Behandeln Sie abschließend das Onmouseup-Ereignis.) Dies ist auch der wichtigste Schritt! ! ! !
Kernidee:
Wenn die Maus angehoben wird, müssen wir den Abstand zwischen dem Mittelpunkt des aktuellen beweglichen Ziels und dem Mittelpunkt jedes Unterelements berechnen.
Derjenige, der am nächsten ist, wird damit vertauscht (beachten Sie, dass hier ein BUG vorliegt, der in 3-1 erwähnt wird und im Voraus behoben werden muss).
Spezifischer Prozess:
3-3-1:
Zuerst müssen wir eine Schleife ausführen und den Abstand zwischen dem Mittelpunkt des Ziehziels und dem Mittelpunkt jedes untergeordneten Elements berechnen, wie in Abbildung 1 dargestellt. (Abstand des Ziehziels vom linken Rand des sichtbaren Fensters – Abstand des untergeordneten Elements vom linken Rand des sichtbaren Fensters) Quadrat + (Abstand des Ziehziels vom oberen Rand des sichtbaren Fensters – Abstand des untergeordneten Elements vom oberen Rand des sichtbaren Fensters)
Quadrat. Ziehen Sie abschließend die Quadratwurzel, um die Entfernung zum Mittelpunkt zu erhalten (beachten Sie, dass der BUG in 3-1 fixiert sein muss, setzen Sie das bewegliche Etikett an das Ende der Struktur und schließen Sie es dann während der Schleife aus, da sonst der nächstgelegene Punkt jedes Mal er selbst ist).
3-3-2:
Wir führen eine Schleife aus, um alle gewünschten Entfernungen zu ermitteln, fügen diese Entfernungen dann in ein Array ein und definieren ein weiteres Array als Backup, um den Vergleich bestimmter Beschriftungen zu erleichtern.
Sortieren Sie eines der Arrays und suchen Sie dann den Index des kleinsten Werts im Backup-Array. Dieser Index ist das entsprechende untergeordnete Element.
3-3-3:
Geben Sie dann die linken und oberen Werte des nächstgelegenen untergeordneten Elements an das Zielelement weiter, geben Sie dann die linken und oberen Werte des geklonten Etiketts an das nächstgelegene untergeordnete Element weiter und entfernen Sie schließlich das geklonte Etikett. Hier wird immer noch ein Fehler auftreten! ! ! Wenn Sie die Maus anheben, ohne auf das Etikett zu drücken, wird ein Fehler gemeldet. Dies liegt daran, dass das Onmouseup-Ereignis direkt ausgeführt wird. Sie müssen daher das Onmouseup-Ereignis entfernen ->
<Stil>
*{Rand: 0;Padding: 0;}
.Vater{position: relativ;}
.father div{Position: absolut;Breite: 100px;Höhe: 100px;Randradius: 10px;Textausrichtung: Mitte;Zeilenhöhe: 100px;Schriftgröße: 30px;Cursor: Zeiger;}
</Stil>
</Kopf>
<Text>
<div class="Vater"></div>
<Skript>
// 3*3 Schleifen, um untergeordnete Div-Elemente zu generieren und Positionierungswerte für sie festzulegen // Feste Randwerte festlegen var mT = 15;
var ml = 15;
var asc = 65; //ASCII-Codewert var oFather = document.querySelector('.father');
für(var i = 0; i < 3; i++){
für(var j = 0; j < 3; j++){
var oDiv = document.createElement('div'); //Unterelement erstellen oFather.appendChild(oDiv);
oDiv.style.left = j * (oDiv.offsetWidth + mL) +'px';
oDiv.style.top = i * (oDiv.offsetHeight + mT) +'px';
// Zufällige Farbeinstellung oDiv.style.background = 'rgb('+parseInt(Math.random()*256) + "," +parseInt(Math.random()*256) + ","+parseInt(Math.random()*256)+')';
// Buchstaben hinzufügen oDiv.innerText = String.fromCharCode(asc++);
}
}
// Zum besseren Verständnis wird das Ereignis außerhalb geschrieben, wo Sie den Tag „Schleife“ darin generieren können. /* var oItem = document.querySelectorAll('.father>div');
Diese Methode ruft eine statische Sammlung ab und ruft nur den Inhalt der ersten geladenen Seite ab. Die Verwendung dieser Methode zum Abrufen untergeordneter Elemente führt zu Fehlern */
var oItem = oVater.Kinder;
für(var k = 0; k<oItem.length; k++){
oItem[k].onmousedown = Funktion(e){
var evt = e || Ereignis;
// Den Abstand von der Maus zum Zielrand ermitteln var x = e.offsetX;
var y = e.offsetY;
var tagNode = dies;
// Ziel-Tag klonen var cloneNode = tagNode.cloneNode();
cloneNode.style.border = '1px gestrichelt #fff';
oVater.appendChild(cloneNode);
tagNode.style.zIndex = 1;
// Wie in der Idee erwähnt, gibt es hier einen BUG, der erfordert, dass die geklonten und gezogenen Knoten vertauscht werden oFather.replaceChild(cloneNode, tagNode);
oVater.appendChild(tagNode);
Dokument.onmousemove = Funktion(e){
var evt = e || Ereignis ;
var l = evt.clientX - x;
var t = evt.clientY - y;
tagNode.style.left = l + 'px';
tagNode.style.top = t + 'px';
// Verhindern Sie Standardereignisse, um Fehler zu vermeiden
gibt false zurück;
}
Dokument.onmouseup = Funktion(){
//Nach dem Anheben der Maus feststellen, welches am nächsten ist und dann vertauschen var oldArr = [];
var neuesArr = [];
für(var l = 0; l<oItem.length - 1; l++){
var disX = tagNode.offsetLeft - oItem[l].offsetLeft;
var disY = tagNode.offsetTop - oItem[l].offsetTop;
// Satz des Pythagoras var dis = Math.sqrt( Math.pow(disX,2) + Math.pow(disY,2) );
altArr.push(dis);
newArr.push(dis);
}
// OldArr von klein nach groß sortieren oldArr.sort(function(a,b){return ab});
var minIndex = newArr.indexOf(oldArr[0]);
console.log('altesArr', altesArr, 'neuesArr', neuesArr);
// Positioniere das dem beweglichen Ziel am nächsten gelegene Element tagNode.style.top = oItem[minIndex].style.top;
tagNode.style.left = oItem[minIndex].style.left;
// Positioniere den Klon zum nächsten oItem[minIndex].style.top = cloneNode.style.top;
oItem[minIndex].style.left = cloneNode.style.left;
//Den geklonten Knoten entfernen oFather.removeChild(cloneNode);
Dokument.onmousemove = null;
Dokument.onmouseup = null;
}
gibt false zurück;
}
}
</Skript>
</body>
</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 verwenden Sie den VIM-Editor unter Linux
Artikel empfehlen
Detaillierte Erläuterung zum Bereitstellen und Installieren der chinesischen Version von Redash in Docker
1. Installationsanweisungen Im Vergleich zur loka...
Instanzmethode für MySQL-String-Verkettung und Festlegen von Nullwerten
#String-Verkettung concat(s1,s2); verkette die St...
Spezifische Verwendung globaler Variablen von node.js
Globales Objekt Alle Module können aufgerufen wer...
Detailliertes Beispiel einer MySQL-Austauschpartition
Detailliertes Beispiel einer MySQL-Austauschparti...
Installations- und Bereitstellungstutorial der neuesten MySQL-Version 5.7.17 (64-Bit-ZIP-Green-Version) unter Win 8 oder höher
Zunächst einmal spielt der Blogger die Community-...
Ausführliche Erklärung der Iteratoren in ECMAScript
Inhaltsverzeichnis Vorwort Frühere Iterationen It...
Installieren Sie mysql5.7.17 mit RPM unter Linux
Die Installationsmethode von MySQL5.7 rpm unter L...
Schritte zum Importieren von Millionen von Daten in MySQL mit .Net Core
Inhaltsverzeichnis Vorbereitende Vorbereitung Imp...
So rufen Sie ein Verzeichnis/einen Ordner in Linux auf, ohne den CD-Befehl zu verwenden
Wie wir alle wissen, können wir in Linux ohne den...
Linux CentOS6.5 yum installiere mysql5.6
In diesem Artikel wird der einfache Prozess der I...
Implementierung einer einfachen Web-Uhr mit JavaScript
Verwenden Sie JavaScript, um eine Webseitenuhr zu...
Unterschiede und Vergleiche von Speicher-Engines in MySQL
MyISAM-Speicher-Engine MyISAM basiert auf der ISA...
So passen Sie CSS an den Vollbildmodus des iPhone an
1. Medienabfragemethode /*iPhone X-Anpassung*/ @m...
Grafisches Tutorial zur Installation von Linux CentOS6.9 unter VMware
Als technischer Neuling zeichne ich den Vorgang d...
Implementierung der Remote-Linux-Entwicklung mit vscode
Verabschieden Sie sich von der Vergangenheit Bevo...