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
  • 相关阅读:
    Windows 任务调度程序定时执行Python脚本
    sklearn 学习 第三篇:knn分类
    sklearn 学习 第二篇:特征预处理
    sklearn 学习 第一篇:分类
    DAX 第六篇:统计函数(描述性统计)
    DAX 第四篇:CALCULATE详解
    DAX 第三篇:过滤器函数
    DAX 第二篇:计算上下文
    DAX 第一篇:数据模型
    Git 第二篇:基本操作
  • 原文地址:https://www.cnblogs.com/xiaolucky/p/14684509.html
Copyright © 2011-2022 走看看