JavaScript实现拖拽功能-优快云博客

本文介绍了使用JavaScript实现拖拽功能的详细步骤，包括鼠标按下时计算元素与鼠标的相对位置，鼠标移动时更新元素位置，限制元素在特定区域内移动，以及鼠标松开时取消元素的拖动状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大体思路

1. 鼠标按下`onmousedown事件`

在该事件，我们需要

计算鼠标相对于元素左上角的坐标（clientX和clientY），
标记元素为可拖动

2. 鼠标移动`onmousedown事件`

在该事件，我们需要

检测元素是否标记为移动
更新元素的位置，到当前鼠标的位置（鼠标当前位置 - 鼠标相对元素的位置）

3. 限制区域

在上面的鼠标移动事件，我们还需要对元素的移动范围做出限制。

首先，页面可移动宽高（窗口宽高 - 元素宽高）；

然后，对move值做限制，最大为页面可移动宽高值，最小值为0。

4. 鼠标松开`onmouseup事件`

把元素标记为不可移动。

代码实现

<html>
<head>
    <meta charset="utf-8">
    <title>选项卡</title>
<style>
        body , html ,div {margin: 0; padding: 0;}

        .box{
            height: 500px;
            width:600px;
            border: 5px solid red;
            display：table; 
            left:200px;
            top:200px;
            position:absolute;
        }

        .tit{
            height:100px;
            background-color:yellow;
            text-align:center;
        }

        .tips{
            line-height: 100px; 
        }

        .con{
            background-color:green;
            height:400px;
            text-align:center;
        }

        .conTxt{
            line-height: 400px; 
        }

    </style>
    <script>
    window.onload = function(){      
        //全局变量
         var isDraging = false;  //  是否可拖拽的标记

         var oBox = document.getElementById("box1");
         var oTit = document.getElementById("oTit");

        //鼠标按下
        oTit.onmousedown = function(e){
            e = event || window.event;

            //鼠标相对于标题栏左上角的坐标
            mouseOffsetX = e.clientX - oBox.offsetLeft;
            mouseOffsetY = e.clientY - oBox.offsetTop;

            //可移动
            isDraging = true;
        }

        //移动事件
        document.onmousemove = function( e ){
            var e = e || window.event;
            var oBox = document.getElementById("box1");

            // 鼠标当前的位置
            var mouseX = e.clientX;   
            var mouseY = e.clientY;

            //  浮层元素的新位置
            var moveX = 0;  
            var moveY = 0;

            if( isDraging === true ){
                moveX = mouseX - mouseOffsetX;
                moveY = mouseY - mouseOffsetY;

                //限制范围

                //获取窗口宽高
                winW=document.documentElement.clientWidth || document.body.clientWidth,
                winH=document.documentElement.clientHeight || document.body.clientHeight,

                //移动最大宽高
                maxX=winW-oBox.offsetWidth,
                maxY=winH-oBox.offsetHeight;

                //move取值限制              
                moveX = Math.min(maxX,Math.max(0,moveX));
                moveY = Math.min(maxY,Math.max(0,moveY));

                //改变元素宽高                
                oBox.style.left = moveX + 'px';
                oBox.style.top  = moveY + 'px';
            }
        }

        //鼠标松开
        document.onmouseup = function(){
            isDraging = false;
        }       
    }
        </script>
</head>
    <body>
        <div class = "box" id = "box1">
            <div class = "tit" id = "oTit"><span class = "tips">在此区域按下鼠标，可以拖拽。</span></div>
            <div class = "con"><span class = "conTxt">这是内容区域</span></div>
        </div>
    </body>
</html>