• 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))
            //判断滑动方向
    
        });
    }
     
  • 相关阅读:
    Gengxin讲STL系列——Set
    理解Python的With语句
    Python中Non-ASCII character 'xe7' in file的问题解决
    gnome-terminal的一些调整
    硬盘的CHS寻址
    Wiz发布cnblog笔记
    cygwin安装man手册
    linux命令行使用
    小步前进
    学习的感觉真好
  • 原文地址:https://www.cnblogs.com/yehx/p/10913140.html
Copyright © 2020-2023  润新知