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))
            //判断滑动方向
    
        });
    }
     
  • 相关阅读:
    什么是内部类
    "=="和equals方法究竟有什么区别?
    SWFUpload乱码问题的解决
    xStream转换XML、JSON
    Java文件下载
    笔记摘录
    Javascript 函数传参问题
    JQUERY伸缩导航
    ruby关于flip-flop理解上一个注意点
    ruby 使用Struct场景
  • 原文地址:https://www.cnblogs.com/yehx/p/10913140.html
Copyright © 2011-2022 走看看