原生js用鼠标拖动多个div块

最新推荐文章于 2024-04-16 19:44:59 发布

zxh.dream

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量940

点赞数 2

文章标签： html javascript css

本文链接：https://blog.csdn.net/SKTDream/article/details/110259204

版权

实现用鼠标拖动div块的移动，当鼠标点击哪个块时，鼠标移动，div也跟着移动，鼠标松开时，则停止移动

<!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 {
            height: 200px;
            width: 200px;
            background-color: red;
            position: absolute;
            top: 20px;
        }
        #d2{
            top: 220px;
            background-color: aqua;
        }
        #d3{
            top: 420px;
            background-color: blueviolet;
        }
        body {
            margin: 0px;
        }
    </style>
    <script>
        var isdown=false;// 判断鼠标是否被按下
        function clickmouse(e){
            isdown=true;//鼠标被按下
        }
        function mouseup(e){
            isdown=false;//鼠标松开
        }
        function move(e,d){
          var t1=  document.getElementById("t1");
          
            var x=e.clientX;//事件被触发时，鼠标指针的水平坐标。
            var y=e.clientY;//事件被触发时，鼠标指针的垂直坐标。
            if(isdown){
            
            t1.value=x+","+y;
            d.style.left=(x-100)+"px";//让鼠标显示在div块的中间，减去1/2的div块的宽度
            d.style.top=(y-100)+"px"; //让鼠标显示在div块的中间，减去1/2的div块的高度
            }
        }
    </script>
</head>

<body >
   <div onmousedown="clickmouse(event)" onmousemove="move(event,this)"  onmouseup="mouseup(event)" id="d1"></div>
   <div onmousedown="clickmouse(event)" onmousemove="move(event,this)"  onmouseup="mouseup(event)" id="d2"></div>
   <div onmousedown="clickmouse(event)" onmousemove="move(event,this)"  onmouseup="mouseup(event)" id="d3"></div>
    <input type="text" id="t1">
</body>

</html>

下面是运行效果
在这里插入图片描述

zxh.dream

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
原生js用鼠标拖动多个div块

实现用鼠标拖动div块的移动，当鼠标点击哪个块时，鼠标移动，div也跟着移动，鼠标松开时，则停止移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti
复制链接

扫一扫