javascript鼠标拖动的div模块

最新推荐文章于 2024-08-18 10:54:05 发布

MoriingRain

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量134

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/MoriingRain/article/details/115499795

版权

javascript css

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript鼠标拖动的div模块

<html>

<head>
    <style type="text/css">
        #divmove {
            background-color: red;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 300px;
        }
    </style>


</head>

<body>
    <div class=divmove id=divmove>
    </div>
</body>
<script type="text/javaScript">
    var flag = false;
    var lastx = 0;
    var lasty = 0;
    var cleft = 0;
    var ctop = 0;
    function mousedown(e)
    {
        if(e.target.className.match("divmove"))
        {
            flag=true;
            var moveObject=document.getElementById('divmove');
            cleft=moveObject.offsetLeft;
            ctop=moveObject.offsetTop;
            lastx=e.clientX;
            lasty=e.clientY;
        }  
    }
    function mousemove(e)
    {
        var moveObject=document.getElementById("divmove");
        if(flag)
        {
            moveObject.style.left=cleft+(e.clientX-lastx)+'px';
            moveObject.style.top=ctop+(e.clientY-lasty)+'px';
        }
    }
    function mouseup(e)
    {
        flag=false;
        lastx=0;
        lasty=0;
        x=0;
        y=0;
    }
    document.addEventListener("mousedown",mousedown);
    document.addEventListener("mousemove",mousemove);
    document.addEventListener("mouseup",mouseup);
</script>
</html>

MoriingRain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript鼠标拖动的div模块

javascript鼠标拖动的div模块<html><head> <style type="text/css"> #divmove { background-color: red; width: 100px; height: 100px; position: absolute; top: 100px;
复制链接

扫一扫

专栏目录