In diesem Artikel wird der spezifische Code von js zur Erzielung eines einfachen Drag-Effekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt 1. Grundlegende Effekte des ZiehensIdeen: Wenn die Maus auf die Box gedrückt wird, ist sie bereit zur Bewegung (das Ereignis wird dem Objekt hinzugefügt). Wenn die Maus bewegt wird, folgt die Box der Maus (das Ereignis wird der Seite hinzugefügt) Wenn die Maus angehoben wird, stoppt die Bewegung der Box (das Ereignis wird der Seite hinzugefügt). var o = document.querySelector('div'); //Maus runter o.onmousedown = function (e) { //Mausposition relativ zur Box var offsetX = e.clientX - o.offsetLeft; var offsetY = e.clientY - o.offsetTop; //Mausbewegung document.onmousemove = function (e) { o.style.left = e.clientX - offsetX + "px"; o.style.top = e.clientY - offsetY + "px"; } //Maus hoch document.onmouseup = function () { Dokument.onmousemove = null; Dokument.onmouseup = null; } } 2. Drag & Drop-ProblemeWenn in der Box Text angezeigt wird oder die Box selbst ein Bild ist, können wir aufgrund des Standardverhaltens des Browsers (Text und Bilder können gezogen werden) „return false“ festlegen, um das Standardverhalten zu verhindern. Dieses Abfangen des Standardverhaltens ist jedoch in niedrigeren IE-Versionen nicht anwendbar. Sie können das IE-Problem mithilfe der globalen Erfassung lösen. Globale Erfassung Die globale Erfassung ist nur auf niedrigere IE-Versionen anwendbar. <button>btn1</button> <button>btn2</button> <Skript> var bts = document.querySelectorAll('Schaltfläche') bts[0].onclick = Funktion () { konsole.log(1); } bts[1].onclick = Funktion () { konsole.log(2); } // bts[0].setCapture() //Globale Erfassung hinzufügen // bts[0].releaseCapture() ; //Globale Erfassung freigeben</script> Sobald eine globale Erfassung für einen angegebenen Knoten hinzugefügt wurde, lösen andere Elemente auf der Seite nicht mehr denselben Ereignistyp aus. 3. Vollversion von Drag & Dropvar o = document.querySelector('div'); //Maus runter o.onmousedown = function (e) { if (o.setCapture) { //IE niedrigere Version o.setCapture() } e = e || Fenster.Ereignis //Mausposition relativ zur Box var offsetX = e.clientX - o.offsetLeft; var offsetY = e.clientY - o.offsetTop; //Mausbewegung document.onmousemove = function (e) { e = e || Fenster.Ereignis o.style.left = e.clientX - offsetX + "px"; o.style.top = e.clientY - offsetY + "px"; } //Maus hoch document.onmouseup = function () { Dokument.onmousemove = null; Dokument.onmouseup = null; wenn (o.releaseCapture) { o.releaseCapture(); //Globale Erfassung freigeben} } return false; //Standardverhalten von Standardbrowsern} 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:
|
<<: js, um einen Boden-Scrolling-Effekt zu erzielen
>>: Beispielcode zur Konvertierung von http in https mit nginx
Heutzutage ist es für Websites Standard, SSL zu a...
yum installiere vsftpd [root@localhost usw.]# yum...
Inhaltsverzeichnis Vorwort Was ist Datenbindung? ...
Vorwort DISTINCT ist tatsächlich der Implementier...
Ich möchte nur eine kleine Sache machen, die Winf...
Inhaltsverzeichnis Erste Methode App.vue Startsei...
1. Wenn die Breite der angrenzenden schwebenden Eb...
PS: Ich verwende hier PHPStudy2016 1. Stoppen Sie...
Vorwort WeChat-Miniprogramme bieten neue offene F...
Die lokale Umgebung ist Windows 10 + WSL2 (Ubuntu...
Beim Erstellen eines Tomcat-Servers auf einem lok...
Was ist der Grund für den Fehler Last_IO_Errno:12...
1. Legen Sie eine Verzeichnis-Whitelist fest: Leg...
Einfach ausgedrückt wird distinct zum Entfernen v...
Inhaltsverzeichnis Vorwort Anwendung Filter Ziehe...