小盒子拖拽

时间：2018-10-22 23:20:40 阅读：324 评论：0 收藏：0 [点我收藏+]

标签：turn html charset 处理 clientx color htm cti space

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
 <title>Document</title>
 <style>
 #box {
 width: 300px;
 height: 300px;
 background: red;
 position: absolute;
 }
 </style>
</head>
<body> <div id="box">
 快来托我吧
 </div>
</body>
</html><script>
 //引入
 var box = document.getElementById("box");
//鼠标按下
 box.onmousedown = function (e) {
 var e = e || event;
 
 var x = e.offsetX;
 var y = e.offsetY;

//在文档页面上移动
        document.onmousemove = function (e) {
            var e = e || event;
 
            var l = e.clientX - x;
            var t = e.clientY - y;
//边界处理            var left = document.documentElement.clientWidth - 300;
            var top = document.documentElement.clientHeight - 300;
 l = l < 0 ? 0 : (l > left ? left : l);            t = t < 0 ? 0 : (t > top ? top : t);
box.style.left = l + "px"
            box.style.top = t + "px";
 
            //阻止默认行
            return false;

}

 //鼠标离开
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }
</script>

小盒子拖拽

标签：turn html charset 处理 clientx color htm cti space

原文地址：https://www.cnblogs.com/fengjuedingyaozou/p/9833672.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行