js选中拖曳

最新推荐文章于 2023-10-17 19:40:46 发布

戒骄戒躁TBE

最新推荐文章于 2023-10-17 19:40:46 发布

阅读量310

点赞数 1

文章标签： javascript dom

本文链接：https://blog.csdn.net/weixin_45942049/article/details/107672559

版权

在这里插入代码片
<!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>div{width: 100px;height: 100px;border-radius: 50px;background: red;position: absolute;}</style>
</head>
<body>
    <div></div>
    <script>
        var oDiv = document.querySelector("div");//首先获取要拖拽的div
        //获取当前可视界面的宽高
        var cw =document.documentElement.clientWidth;
        var ch =document.documentElement.clientHeight;
        //获取div的宽高
        var dt =oDiv.clientWidth;
        var dh =oDiv.clientHeight;
        //添加鼠标落下事件
        oDiv.onmousedown = function(e){
            var evt = e||event;
            //获取事件对象距离事件源的距离
            var x = evt.offsetX;
            var y = evt.offsetY;
            //验证
            console.log(x);
            console.log(y);
            //添加鼠标移动事件
            document.onmousemove =function(e){
                var evt = e||event;
				//算出div移动时距离可视界面的事实距离
                var i=evt.clientX-x;
                var j=evt.clientY-y;
				//限制出界
                i=i<=0?0:i>=cw-dt?cw-dt:i;
                j=j<=0?0:j>=ch-dh?ct-dh:j;
				//
                oDiv.style.left = i+"px";
                oDiv.style.top =j+"px";
            }
            //
            document.onmouseup=function(){
            	//清除
                document.onmousemove=null;
            }
        }
    </script>
</body>
</html>
# 标题