js zum Simulieren von Mausziehereignissen (mit Bild- und Textbeispielen)-js-Tutorial-php.cn

js zum Simulieren von Mausziehereignissen (mit Bild- und Textbeispielen)

藏色散人

Freigeben： 2022-08-07 10:14:12

nach vorne

3791 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt den spezifischen Code zum Realisieren des Mauszieheffekts in JavaScript als Referenz. Der spezifische Inhalt lautet wie folgt:

Ich denke, die Schwierigkeit ist Bei diesem Experiment bleibt die relative Position der Maus unverändert, und der Zieheffekt wird durch Drücken und Bewegen der Maus erzielt.

Wir müssen drei Funktionen verwenden: onmousedown, onmousemove, onmouseup, die jeweils die Maus nach unten, die Mausbewegung und die Maus nach oben darstellen.

In der Rückruffunktion von gedrückter Maus müssen wir clientX übergeben und clientY ermitteln die Anfangsposition der Maus, ermitteln die Anfangsposition der Box über offsetLeft und offsetTop und berechnen dann die Anfangsposition der Maus und des Feldes Der Unterschied in der Anfangsposition In der Rückruffunktion von Mausbewegung span>, wir müssen die aktuelle Position des Felds basierend auf der Differenz zwischen der Mausposition und dem zuvor berechneten Wert ermitteln und dann seine linken und oberen Werte ändern. Vergessen Sie nicht, die Position auf absolut () zu setzen. weil ich es vergessen habe...)

In Maus hoch müssen wir die Mausbewegung und die Maus hoch löschen, indem wir onmousemove und onmouseup Setzen Sie einfach den Wert auf nullonmousedown、onmousemove、onmouseup，分别表示鼠标按下、鼠标移动、鼠标抬起

在鼠标按下的回调函数中，我们需要通过clientX和clientY获取鼠标的初始位置，通过offsetLeft和offsetTop获取盒子的初始位置，然后计算鼠标初始位置和盒子初始位置的差值；

在鼠标移动的回调函数中，我们需要根据鼠标的位置和之前计算得到的差值来获取盒子现在的位置，然后改变其left和top值，不要忘记将position设置为absolute（因为我就忘记了。。。)

在鼠标抬起的回调函数中，我们需要清除鼠标移动和鼠标抬起，通过将onmousemove和onmouseup

Achten Sie auch

auf! ! !

Sowohl die Mausbewegungsfunktion als auch die Maushebefunktion müssen in der Mausdruckfunktion geschrieben werden, da wir das nachfolgende Verhalten nach dem Mausdrücken entwerfen müssen, und

Ein sehr wichtiger Punkt ist:

Maus Die Druckfunktion gehört zu p, und die Mausbewegung und das Anheben der Maus gehören zum Dokument

Da wir nicht meinen, dass sich die Maus in p bewegt, sondern auf der gesamten Seite

Die wichtigsten Punkte sind wahrscheinlich diese, hier ist der Code :

<!DOCTYPE html>
<html>
<head>
    <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>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            border-radius: 14px;
            box-shadow: 2px 2px 6px rgba(0,0,0,.3);

            /* 好家伙 都没设置定位  就想移动 改变left。。。 */
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let box=document.getElementById("box");
        box.onmousedown=function(event){
            let disx=event.clientX-box.offsetLeft;
            let disy=event.clientY-box.offsetTop;
            //此处不是box.onmousemove，是document.onmousemove
            document.onmousemove=function(event){
                box.style.left=event.clientX-disx+&#39;px&#39;;
                box.style.top=event.clientY-disy+&#39;px&#39;;
            }

            //要写在ommousedown里面
            document.onmouseup=function(){
                //这俩都要置为null
            document.onmousemove=null;
            document.onmouseup=null;
            return false;
        }
        }
        
    </script>
</body>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen: [

JavaScript-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonjs zum Simulieren von Mausziehereignissen (mit Bild- und Textbeispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!