zoukankan      html  css  js  c++  java
  • JavaScript拖拽效果的原理及实现

    JavaScript拖拽效果的原理及实现

    JavaScript中实现拖拽效果需要用到事件侦听鼠标事件。事件侦听是对被拖拽的元素添加事件侦听,包括mousedown,mousemove,mouseup。

    常见的拖拽操作基本就是下面的方式:

      1、用鼠标点击选中被拖拽的元素

      2、按住鼠标不放,拖动鼠标

      3、拖拽元素到一定位置,放开鼠标实现拖拽的效果

    在逆战班的学习中一些情况下还需要用到mouseleave。这里讲述的案例是存在多个元素情况下的拖拽。

    以下先展示拖拽效果,如下所示:

    具体的代码如下所示:

    1.创建div元素并设置简单的CSS样式

    <style>
        div {
           50px;
          height: 50px;
          background-color: blue;
          text-align: center;
          position: absolute; /*设置的这些div默认重叠在页面左上角*/
        }
      </style>
      <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    

    2.每一个div都需要有一个侦听事件,才能实现所有的div都有拖拽效果。代码如下

    var divs = document.querySelectorAll("div"); //获取div元素的伪数组集合
          for (var i = 0; i < divs.length; i++) {
            //利用for循环,给每个div添加一个鼠标按下的事件,来触发函数mouseHandler
            divs[i].addEventListener("mousedown", mouseHandler);
          }
    

    3.函数mouseHandler的主体部分了,这里我采用的是if,else if来写。

     function mouseHandler(e) {
            //通过判断事件的类型来执行对应的条件语句
            if (e.type === "mousedown") {
              e.preventDefault();
              //这里将e.target赋给document.div,相当于设了一个局部变量,在触发mousemove事件后,
              //再次进入函数时,保证触发事件的div就是我们要改变位置的那个div
              document.div = e.target;
              //这里也是将鼠标相对拖拽的那个div元素
              //左上角的位置,设置成一个对象进行保存其实相当于如下两条
              document.offset = { x: e.offsetX, y: e.offsetY };
              //document.offsetx=e.offsetX;将e.offsetX赋值给自定义变量document.offsetx
              //document.offsety=e.offsetY;将e.offsetY赋值给自定义变量document.offsety
              //和上面是两种写法
              //在鼠标点击后,如果发生鼠标移动事件,则再次进入该函数进行执行鼠标移动的执行语句
              document.addEventListener("mousemove", mouseHandler);
              //在鼠标点击后,如果发生鼠标释放事件,则再次进入该函数进行执行,则再次进入该函数进行执行鼠标释放的执行语句
              document.addEventListener("mouseup", mouseHandler);
            } else if (e.type === "mousemove") {
              //判断触发的事件类型是mousemove之后执行
              //这里的document.div和document.offset.x都是之前定义好的变量,用e.clientX-document.offset.x
              //是因为元素的position位置是相对元素的左上顶点的位置的,因此鼠标所在的位置值不能直接赋给它。
              document.div.style.left = e.clientX - document.offset.x + "px";
              document.div.style.top = e.clientY - document.offset.y + "px";
            } else if (e.type === "mouseup") {
              //如果鼠标释放,则执行移除事件侦听
              document.removeEventListener("mousemove", mouseHandler);
              document.removeEventListener("mouseup", mouseHandler);
            }
          }
    
  • 相关阅读:
    SQLSERVER 2012之AlwaysOn -- 一次硬件升级引发的问题
    SQLSERVER 2012之AlwaysOn -- 同步模式下的网卡性能优化
    Replication的犄角旮旯(九)-- sp_setsubscriptionxactseqno,赋予订阅活力的工具
    关于X锁的问题--由select+X锁是否持有到事务结束的误区
    SQLServer 2012之AlwaysOn —— 指定数据同步链路,消除网络抖动导致的提交延迟问题
    Replication的犄角旮旯(八)-- 订阅与发布异构的问题
    Replication的犄角旮旯(七)-- 一个DDL引发的血案(下)(聊聊logreader的延迟)
    JavaScript 学习笔记 -- String.trim + format
    SQL笔记
    SQL笔记
  • 原文地址:https://www.cnblogs.com/hong-hao/p/12644040.html
Copyright © 2011-2022 走看看