Home > Web Front-end > JS Tutorial > How to implement left mouse button dragging effect with JavaScript

How to implement left mouse button dragging effect with JavaScript

藏色散人
Release: 2020-05-12 16:52:00
forward
2098 people have browsed it

How to implement left mouse button dragging effect with JavaScript

Two ways to achieve the drag effect of the left mouse button:

Method 1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .move {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position:absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <script>
        //制作一个鼠标左键拖拽效果
        var div = document.getElementsByClassName("move")[0];
        var style = window.getComputedStyle(div);
        var divLeft = parseFloat(style.left);
        var divTop = parseFloat(style.top);
        div.onmousedown = function(e){
            if(e.button !== 0){
                return ;//不是鼠标左键,return
            }
            window.onmousemove = function(e){
                divLeft += e.movementX;//距上次鼠标位置的X长度
                divTop += e.movementY;//距上次鼠标位置的Y长度
                div.style.left = divLeft + "px";
                div.style.top = divTop + "px";
            }
            window.onmouseup = window.onmouseleave = function(){
                if(e.button === 0){//鼠标左键
                    window.onmousemove = null;
                }
            }
        }
    </script>
</body>
</html>
Copy after login

Recommended related video tutorials: "javascript Advanced Tutorial"

Method 2:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .move {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position:absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <script>
        //制作一个鼠标左键拖拽效果
        var div = document.getElementsByClassName("move")[0];
        var style = window.getComputedStyle(div);
        div.onmousedown = function(e){
            if(e.button !== 0){
                return ;//不是鼠标左键,return
            }
            var divLeft = parseFloat(style.left);
            var divTop = parseFloat(style.top);
            var divPageX = e.pageX;
            var divPageY = e.pageY;
            window.onmousemove = function(e){
                var disX = e.pageX - divPageX;
                var disY = e.pageY - divPageY;
                div.style.left = divLeft + disX + "px";
                div.style.top = divTop + disY + "px";
            }
            window.onmouseup = window.onmouseleave = function(){
                if(e.button === 0){//鼠标左键
                    window.onmousemove = null;
                }
            }
        }
    </script>
</body>
</html>
Copy after login

Related recommended downloads: "Text Special Effects"

The above is the detailed content of How to implement left mouse button dragging effect with JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template