zoukankan      html  css  js  c++  java
  • js实现移动端悬浮图标拖拽

    /**
     * Created by Administrator on 2019/5/23.
     */
    window.onload = function () {
        var oDiv = document.getElementById('touchMove');
    
        var disX, moveX, L, T, starX, starY, starXEnd, starYEnd;
    
        oDiv.addEventListener('touchstart', function (e) {
            //e.preventDefault();
    
            disX = e.touches[0].clientX - this.offsetLeft;
            disY = e.touches[0].clientY - this.offsetTop;
            starX = e.touches[0].clientX;
            starY = e.touches[0].clientY;
        });
        oDiv.addEventListener('touchmove', function (e) {
            L = e.touches[0].clientX - disX;
            T = e.touches[0].clientY - disY;
            starXEnd = e.touches[0].clientX - starX;
            starYEnd = e.touches[0].clientY - starY;
            //console.log(L);
            if (L < 0) {
                L = 0;
            } else if (L > document.documentElement.clientWidth - this.offsetWidth) {
                L = document.documentElement.clientWidth - this.offsetWidth;
            }
    
            if (T < 0) {
                T = 0;
            } else if (T > document.documentElement.clientHeight - this.offsetHeight) {
                T = document.documentElement.clientHeight - this.offsetHeight;
            }
            moveX = L + 'px';
            moveY = T + 'px';
            //console.log(moveX);
            this.style.left = moveX;
            this.style.top = moveY;
        });
        window.addEventListener('touchend', function (e) {
            //alert(parseInt(moveX))
            //判断滑动方向
    
        });
    }
     
  • 相关阅读:
    List 集合的常用方法总结
    springboot 整合 web 项目找不到 jsp 文件
    Web 安全
    微服务开放平台接口设计
    SpringCloud Hystrix 参数
    SpringCloud Eureka 配置
    ELK 日志收集系统
    网盘搜索引擎原理
    jsPlumb.jsAPI阅读笔记(官方文档翻译)
    ionic获取ios唯一设备id的解决方案
  • 原文地址:https://www.cnblogs.com/yehx/p/10913140.html
Copyright © 2011-2022 走看看