zoukankan      html  css  js  c++  java
  • 按钮拖拽(限制Y轴 可视区域内)

    <div
          class="case__build"
          @touchstart="down($event, 'toTop')"
          @touchmove.prevent="move($event, 'toTop')"
          @touchend="end"
          @click="build"
          id="toTop"
        >
        </div>
    data(){
          flags: false, // 按钮启用拖拽状态
          position: { x: 0, y: 0 }, // 拖拽位置
       }


    //
    实现新建按钮拖拽 down(event, id) { this.flags = true; let touch; const moveDiv = document.getElementById(id); if (event.touches) { touch = event.touches[0]; } else { return; } if (!moveDiv) { return; } this.position.x = moveDiv.offsetLeft - touch.clientX; this.position.y = moveDiv.offsetTop - touch.clientY; }, move(event, id) { if (this.flags) { let touch; const moveDiv = document.getElementById(id); if (event.touches) { touch = event.touches[0]; } else { return; } if (!moveDiv) { return; } // 只让y方向拖动,限于屏幕内 // const nx = this.position.x + touch.clientX; let ny = this.position.x + touch.clientY; // moveDiv.style.left = nx + 'px'; if(ny < 0) { ny = 0 }; if(ny > (window.screen.height - 150)) { ny = window.screen.height - 150 } moveDiv.style.top = ny + 'px'; //阻止页面的滑动默认事件 document.addEventListener( 'touchmove', function() { event.preventDefault(); }, { passive: false }, ); } }, //鼠标释放时候的函数 end() { this.flags = false; }
      .case__build {
         0.8rem;
        height: 0.8rem;
        position: fixed;
        bottom: 0.63rem;
        right: 0.05rem;
        background: url("@{icons}/build-icon.png") no-repeat center center;
        background-size: 0.8rem auto;
      }
    sunshine15666
  • 相关阅读:
    自动装配
    SpringMVC
    线程池的类型以及执行线程submit()和execute()的区别
    JDBC配置文件db.properties(Mysql) 及dbutils的编写
    tokuDB 安装与备份小记
    CentOS 7 安装 LEMP
    MySQL 闪回工具之 binlog2sql
    解决 MySQL 分页数据错乱重复
    ClickHouse 快速入门
    【理论篇】Percona XtraBackup 恢复单表
  • 原文地址:https://www.cnblogs.com/xiaolucky/p/14684509.html
Copyright © 2011-2022 走看看