suchen

Heim  >  Artikel  >  Web-Frontend  >  Einfache Implementierung des JS-Drag-Effekts

Einfache Implementierung des JS-Drag-Effekts

不言
不言Original
2018-03-31 13:36:231140Durchsuche

Dieser Artikel teilt Ihnen den Code zur einfachen Implementierung des JS-Drag-Effekts mit, der mithilfe des mobilen Attributs von Trnsform von CSS3 implementiert wird. Freunde in Not können sich den Inhalt dieses Artikels ansehen

Erreicht durch Verwendung des mobilen Attributs von CSS3 Trnsform.

Der Code lautet wie folgt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      #dom{
          width: 50px;
          height: 50px;
          border: 2px solid red;
      }
    </style>
</head>
<body>
    <p id="dom"></p>
    <script>

        (function(){
            let dom = document.getElementById(&#39;dom&#39;);
            let moveX,moveY
            dom.addEventListener(&#39;mousedown&#39;,function (e) { 
                moveX=e.target.offsetWidth;
                moveY=e.target.offsetHeight
                console.log(e);
                document.addEventListener(&#39;mousemove&#39;,move,false)
                
            })
            function move(e){
                if(moveY&& moveY){
                    let width =moveX/2,height = width+moveY;
                    dom.style.transform=&#39;translate(&#39;+(e.x-width)+&#39;px,&#39;+(e.y-height)+&#39;px)&#39;
                }
            }
            document.addEventListener(&#39;mousemove&#39;,move,false)
            document.addEventListener(&#39;mouseup&#39;,function (e) {
                let width =moveX/2,height = width+moveY;
                let i =(e.x-width) +&#39;px&#39;,y=(e.y-height)+&#39;px&#39;;
              
                if(moveX && moveY){
                    document.removeEventListener(&#39;mousemove&#39;,move,false);
                    dom.style.transform=&#39;translate(&#39;+i+&#39;,&#39;+y+&#39;)&#39;;
                    moveY=&#39;&#39;,moveX=&#39;&#39;
                }
                
            })
        })()
    
    
    </script>
</body>
</html>

Verwandte Empfehlungen:

Einfache Implementierung des JSP-Paging-Anzeigeeffekts

So implementieren Sie die Bildkomprimierungsmethode in JS

So implementieren Sie die exquisite automatische Currying-Funktion in JS

Das obige ist der detaillierte Inhalt vonEinfache Implementierung des JS-Drag-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css3 JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Sichere Anmeldeschnittstelle mit AjaxNächster Artikel：Sichere Anmeldeschnittstelle mit Ajax

In Verbindung stehende Artikel

Mehr sehen