原生实现拖拽效果

最新推荐文章于 2024-07-10 14:36:18 发布

Ylk_IT

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量51

点赞数

文章标签： HTML JavaScript 拖拽效果事件处理 DOM操作

本文链接：https://blog.csdn.net/ylk_manong/article/details/118606567

版权

简单版本的拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box=document.getElementById('box');
        box.onmousedown=function(ev){
            var event=ev||window.event;
            var x=event.offsetX;
            var y=event.offsetY;
            document.onmousemove=function(ev){
                var event=window.event||ev;
                var l=event.clientX-x;
                var t=event.clientY-y;
                box.style.left=l+'px';
                box.style.top=t+'px';
            }

            box.onmouseup=function(){
                document.onmousemove=null;
            }
        }
        
    </script>
</body>
</html>