zoukankan      html  css  js  c++  java
  • 使用mousedown、mousemove、mouseup实现拖拽效果

    如何实现一个元素的拖拽效果,使用原生的js实现,习惯了jquery的同学们,你们自己写了吗?N久使用mvvm框架,不写jquery的东西,感觉自己完全不会了。

    话不多说,直接上code。本例子以简单的div为例子。

    html

    <div id="div">我是一个可以退拽的div</div>

    css

    div {
      position: fixed;
      left: 0;
      top: 0;
       100px;
      height: 100px;
      background: #999;
      padding: 10px;
      cursor: pointer;
    }

    javascript

    window.onload = funtion() {
      const div = document.getElementById('div');
      let initPosition = {};
    
    
      div.addEventListener('mousedown', onMousedown);
      
      function onMousedown(event) {
        
        const { pageX, pageY } = event;
        initPosition = getPosition();
    
        document.addEventListener('mousemove', omMousemove);
        document.addEventListener('mouseup', onMouseUp);
    
      }
    
      function omMousemove(event) {
        const { pageX, pageY } = event;
        const { left, top} = calcPosition(pageX, pageY);
    
        div.style.cssText = `left:${left}px;top:${top}px;`;
    
      }
    
      function onMouseUp(event) {
        document.removeEventListener('mousemove', onMouseMove);
      }
    
    
      function calcPosition(pageX, pageY) {
    
        const { left, top, scrollLeft, maxCriticalX, maxCriticalY } = initPosition;
    
        let x = pageX - left;
        let y = pageY - top;
    
        if (x <= scrollLeft) {
          x = scrollLeft;
        }
    
        if (x >= maxCriticalX) {
          x = maxCriticalX;
        }
    
        if (y >= maxCriticalY) {
          y = maxCriticalY;
        }
    
        if ( y<=0 || maxCriticalY < 0) {
          y = 0;
        }
    
        return {
          left: x,
          top: y
        };
      }
    
    
    
      function getPosition() {
        const { left, top, width, height } = div.getBoundingClientRect();
        const { scrollLeft, scrollTop } = document.body;
    
        const maxCriticalX = scrollLeft + innerWidth - width;
        const maxCriticalY = scrollTop + innerHeight - height;
    
        return {
            left,
            top,
            scrollLeft,
            maxCriticalX,
            maxCriticalY
        };
      }
    };

     

     
  • 相关阅读:
    内存泄漏检测
    qt 关于内存泄漏的检测
    Valgrind 安装与使用
    Qt应用中检测内存泄露——VLD
    Visual C++内存泄露检测—VLD工具使用说明
    ArcGIS Runtime支持的GP工具列表(转 )
    c# 调用ArcEngine的GP工具
    ArcEngine 数据导入经验(转载)
    在ArcEngine中使用Geoprocessing工具-执行工具
    利用C#与AE调用GP工具
  • 原文地址:https://www.cnblogs.com/zzsdream/p/10932615.html
Copyright © 2011-2022 走看看