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))
        //判斷滑動方向

    });
}
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM