当前位置 博文首页 > 文章内容
最大化 缩小

    js实现拖拽效果

    作者： 栏目：未分类 时间：2020-09-20 14:02:14

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客，有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
    博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！

    另祝：版权碰瓷诈骗团伙，早日弃暗投明。

    相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹！百花齐放的时代,渐行渐远!


    代码如下

    <html>
      <head>
        <style>
          div {
            width: 100px;
            height: 100px;
            background: pink;
            position: relative;
            top: 10px;
            left: 10px;
          }
        </style>
      </head>
    <body>
    <div>me</div>
    <script>

    var div=document.querySelector("div");
        var offsetX,offsetY;　　//定义全局变量用于接收鼠标坐标的变量
        div.addEventListener("mousedown",mouseHandler);
        function mouseHandler(e){  //事件的执行函数自带参数e
          if(e.type==="mousedown"){  //e.type是执行事件的类型
            offsetX=e.offsetX;    
            offsetY=e.offsetY;   
            document.addEventListener("mousemove",mouseHandler) 
            document.addEventListener("mouseup",mouseHandler)  //如果有鼠标移动或松开事件的发生再次执行mouseHandler函数
          }else if(e.type==="mousemove"){      
            div.style.left=e.clientX-offsetX+"px"; //鼠标相对当前可视窗口的坐标 - 相对元素左上角的坐标 
            div.style.top=e.clientY-offsetY+"px";
            
          }else if(e.type==="mouseup"){  
            document.removeEventListener("mousemove",mouseHandler);
            document.removeEventListener("mouseup",mouseHandler);  //删除鼠标移动和鼠标松开事件
          }
        }

    </script>
    </body>
    </html>

    注意：div元素要设置定位才可以进行移动。

    广州vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com