zoukankan      html  css  js  c++  java
  • 13.JavaScript实现鼠标左键拖拽效果

    实现鼠标左键拖拽效果的两种方式:

    方式一:

    <!DOCTYPE html>
    <html lang="en">
    
    <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 class="move">
    
        </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>
    index.html

    方式二:

    <!DOCTYPE html>
    <html lang="en">
    
    <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 class="move">
    
        </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>
    index.html
  • 相关阅读:
    [产品设计]我对移动互联网产品的观点
    [Android阅读代码]圆形旋转菜单CircleMenu
    [Android代码阅读]分类简介
    [Android学习笔记]Android调试
    [Android]ADT Run时候报错:The connection to adb is down, and a severe error has occured
    [Android学习笔记]使用ListView
    [Android]Button按下后修改背景图
    [.NET Framework学习笔记]一些概念
    ubuntu fcitx 安装 使用
    nyoj-626-intersection set
  • 原文地址:https://www.cnblogs.com/lanshanxiao/p/12778804.html
Copyright © 2011-2022 走看看