div随鼠标移动

CSS与JS实现元素拖动与键盘移动

最新推荐文章于 2024-11-09 08:46:56 发布

原创最新推荐文章于 2024-11-09 08:46:56 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍如何使用CSS和JavaScript实现网页元素的拖动功能和键盘方向键控制移动。通过设置元素的绝对定位，利用JavaScript监听鼠标按下事件，计算鼠标相对于元素的位置，再在鼠标移动事件中更新元素的位置，实现拖动效果。同时，通过监听键盘事件，根据方向键调整元素的左右上下位置。

    <style>
        *{margin: 0;padding: 0}
        #box{width: 100px;height: 50px;background: pink;position: absolute}
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box=document.getElementById("box");
    window.onkeydown=function (e) {
        if(e.keyCode==39){
            var L=box.offsetLeft+10
            box.style.marginLeft=L+"px"
        }
        if(e.keyCode==37){
            var L=box.offsetLeft-10
            box.style.marginLeft=L+"px"
        }
        if(e.keyCode==38){
            var T=box.offsetTop-10
            box.style.marginTop=T+"px"
        }
        if(e.keyCode==40){
            var B=box.offsetTop+10
            box.style.marginTop=B+"px"
        }
    };
    function yidong(id) {
        var box=document.getElementById(id)

    box.onmousedown=function (ev) {
        var w=ev.clientX-box.offsetLeft;
        var h=ev.clientY-box.offsetTop;
        window.onmousemove=function (e) {
            var L=e.clientX-w;
            var T=e.clientY-h;
            box.style.left=L+"px";
            box.style.top=T+"PX"
        };
        box.onmouseup=function () {
            window.onmousemove=null
        }
    }
    }
    yidong("box")

</script>