Einfache Implementierung des JS-Drag-Effekts-js-Tutorial-php.cn

Einfache Implementierung des JS-Drag-Effekts

不言

Freigeben： 2018-03-31 13:36:23

Original

1165 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!