美文网首页
JavaScript 拖拽

JavaScript 拖拽

作者: 柒月_学前端 | 来源:发表于2020-08-07 14:45 被阅读0次

    事件对象

    • 概述:我们可以给元素绑定事件【DOM0、DOM2】,都有事件处理函数;
    • 当事件触发的时候,事件处理函数执行,其实系统底层会给事件处理函数传递实参,我们可以用形参接受
    • 系统自动注入是实参:事件对象
    <script type="text/javascript">
              //获取元素、绑定事件
              //①不是随随便便的一个函数执行就有事件对象
              var div = document.getElementsByTagName("div")[0];
              //绑定单击事件
    div.onclick = function(event){
                   //短路语法兼容事件对象
                   //如果是高级浏览器event
                   //如果是低级浏览器事件对象是作为BOM对象属性
                   var e =  event||window.event;
                   console.log(e);
              }
    </script>
    
    • 不是随随便便一个函数执行就有事件对象的【作为事件处理函数】
    • event:高级浏览器写法 window.event:低级浏览器写法
    • 事件对象在JS当中引用类型数值

    screenX||screenY

     注意:事件对象的身上有很多属性,其中有八个属性可以获取到鼠标位置;
     概述:上面两个属性是事件对象的;它主要的作用是获取到鼠标距离屏幕左上角的零零点水平轴、垂直轴距离
    
    获取距离屏幕左上角的坐标
    <script type="text/javascript">
          //获取元素inner
          var inner = document.querySelector(".inner")
          //给DOM对象绑定鼠标移动事件
    document.onmousemove = function(event){
    //短路语法进行兼容
    var e = event||window.event;
    console.log(e.screenX)
    console.log(e.screenY)
    </script>
    

    pageX||pageY

        他们两个也是事件对象的属性;主要的作用是可以获取到鼠标距离页面左上角零零点的水平轴、垂直距离; 
        页面出现滚动条也会以页面高度来定位
    

    clientX||clientY

        主要的作用是可以获取到鼠标距离可视区域的水平轴、垂直距离;
        可是区域即眼睛可以看到的区域
    

    offsetX||offsetY

        你可以认为他们获取数据类似于pageX||pageY.
        但是获取数据会受到子元素的坐标体系影响
    

    拖拽基本使用

        概述:在JS当中我们可以实现拖拽功能;
        无非是三板斧【鼠标按下:onmousedown、鼠标移动:onmousemove、鼠标抬起:onmouseup】
    
    <script type="text/javascript">
     //获取div
    var div = document.querySelector("div");
    var idx = 0;
    //鼠标按下:获取一次鼠标距离盒子左侧边沿、顶部边缘距离
    div.onmousedown = function(event){
      //短路语法兼容鼠标按下的事件对象
      var e = event||window.event;
      //使用局部变量存储其实数据【鼠标距离盒子左侧、顶部数据】
      var startX = e.offsetX;
      var startY = e.offsetY;
      console.log("鼠标按下");
      //鼠标移动
      div.onmousemove = function(event){
        var R = parseInt(Math.random()*255);
        var G = parseInt(Math.random()*255);
        var B = parseInt(Math.random()*255);
        idx+=5;
        //短路语法兼容鼠标移动事件对象
        var e= event||window.event;
        //无非改变元素left、top
        div.style.left = e.clientX - startX +"px";
        div.style.top = e.clientY - startY +"px";
        div.style.transform = `rotate(${idx}deg)`;
        div.style.border = `10px dashed rgb(${R},${G},${B})`;
      }
    }
    //鼠标抬起事件:鼠标移动事件
    document.onmouseup = function(){
      div.onmousemove = null;
    }
    
    </script>
    
    

    相关文章

      网友评论

          本文标题:JavaScript 拖拽

          本文链接:https://www.haomeiwen.com/subject/culhdktx.html