JavaScript实现鼠标点击拖拽移动

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

老李头的代码生活

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

阅读量2.6k

点赞数 1

分类专栏： JavaScript 文章标签： javascript css html5

本文链接：https://blog.csdn.net/laoli360/article/details/120242631

版权

本文介绍了如何利用JavaScript实现鼠标点击拖拽移动的功能。首先，通过CSS设置通用样式并为拖拽元素添加背景图片及解除默认样式。接着，使用JavaScript监听鼠标事件，实现元素的拖动操作。

摘要由CSDN通过智能技术生成

1.CSS首先用通配符清内外边距然后给自己需要用的盒子加上背景图片及脱标

      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        background: url(./images/dog.jpg) round;
        position: absolute;
        left: 0;
        top: 0;
      }

2.js监控事件及操作

   // 先获取
      let div = document.querySelector("div"); //获取div盒子
      let startx, starty; //声明一个量  让他处于绝对作用域 不进行赋值

      function moveDiv(e) {
        //设置一个函数 用于执行鼠标按下拖拽操作的内容
        let x = e.clientX - startx;
        let y = e.clientY - starty;
      //clientX,clientY 鼠标相对于视口的位置     
      //startx,starty 鼠标相对于div盒子的距离
        if (x < 30) x = 0;// 设置 当x 也就是 鼠标点击位置距离左 上 距离为30以下时 直接变为0
        else if (x > document.documentElement.clientWidth - div.offsetWidth) {
          x = document.documentElement.clientWidth - div.offsetWidth;
        }
        // 当x的距离>页面宽-盒子的宽度(