Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Code zum Realisieren des Mauszieheffekts in JavaScript als Referenz mit. Der spezifische Inhalt ist wie folgt
.
Ich denke, die Schwierigkeit dieses Experiments besteht darin, die relative Position der Box und der Maus unverändert zu lassen. Wie erreicht man den Drag-Effekt durch Drücken und Bewegen der Maus
?
Wir müssen drei Funktionen verwenden: onmousedown , onmousemove und onmouseup , die jeweils das Drücken der Maus, das Bewegen der Maus und das Anheben der Maus darstellen.
In der Rückruffunktion des Mausdrückens müssen wir die Anfangsposition der Maus über clientX und clientY ermitteln. und über offsetLeft und offsetTop wird die Anfangsposition der Box ermittelt und dann die Differenz zwischen der Anfangsposition der Maus und der Anfangsposition der Box
in der Rückruffunktion der Mausbewegung berechnet. Wir müssen die aktuelle Position ermitteln Das Feld basiert auf der Differenz zwischen der Mausposition und der zuvor berechneten Position und ändert dann seine linken und oberen Werte. Vergessen Sie nicht, die Position auf absolut zu setzen (weil ich es gerade vergessen habe ...).
In der Rückruffunktion von Mauslift : Wir müssen die Mausbewegung und den Mauslift löschen, indem wir onmousemove und onmouseup auf null setzen
. Passen Sie auch auf! ! !
Sowohl die Mausbewegungsfunktion als auch die Maushebefunktion müssen in der Mausdruckfunktion geschrieben werden, da wir das nachfolgende Verhalten nach der Mausdruckaktion entwerfen müssen. Ein sehr wichtiger Punkt ist:
Die Mausdruckfunktion ist p und die Maus Das Verschieben und Anheben der Maus ist im Dokument enthalten,
da wir nicht meinen, dass sich die Maus in p bewegt, sondern die gesamte Seite.
Die wichtigsten Punkte sind wahrscheinlich die folgenden:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokument</title>
<Stil>
#Kasten{
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: Aquamarin;
Randradius: 14px;
Box-Shadow: 2px 2px 6px rgba(0,0,0,.3);
/* Die Guten wollen sich bewegen und nach links ändern, ohne die Positionierung festzulegen. . . */
Position: absolut;
}
</style>
</head>
<Körper>
<div id="box"></div>
<Skript>
let box=document.getElementById("box");
box.onmousedown=function(event){
let disx=event.clientX-box.offsetLeft;
let disy=event.clientY-box.offsetTop;
//Dies ist nicht box.onmousemove, sondern document.onmousemove
document.onmousemove=function(event){
box.style.left=event.clientX-disx+'px';
box.style.top=event.clientY-disy+'px';
}
//In omniusedown zu schreiben document.onmouseup=function(){
//Beide müssen auf null gesetzt sein
document.onmousemove=null;
document.onmouseup=null;
return false;
}
}
</script>
</body>
</html> Verwandte Empfehlungen: [JavaScript-Video-Tutorial]
Das Obige ist der detaillierte Inhalt von js zum Simulieren von Mausziehereignissen (mit Beispielen für Bilder und Texte). Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !
