直播帶貨app原始碼，實現移動端的按鈕拖動

直播帶貨app原始碼，實現移動端的按鈕拖動的相關程式碼
html

<button id="btnFS" class="btn btn-success" >開始體驗</button>

js

var flag, btnEle, cur, nx, ny, dx, dy, x, y; 
flag = false;
btnEle = document.getElementById("btnFS"); 
cur = {x: 0,y: 0 };
function down() {
    var touch = event.touches[0];
    flag = true;
    cur.x = touch.clientX;
    cur.y = touch.clientY;
    dx = btnEle.offsetLeft;
    dy = btnEle.offsetTop;
}
function move(){
    if(flag){
        var touch = event.touches[0];
        nx = touch.clientX - cur.x;
        ny = touch.clientY - cur.y;
        x = dx + nx;
        y = dy + ny;
        if(Math.abs(nx)) {
             event.preventDefault();
        }
        if (x<=0) {
            x = 0;
        } else if(x>=btnEle.parentNode.offsetWidth - btnEle.offsetWidth) {
            x = btnEle.parentNode.offsetWidth - btnEle.offsetWidth;
        } else {
            x = x;
        }

        if (y<=0) {
            y = 0;
        } else if(y>=btnEle.parentNode.offsetHeight - btnEle.offsetHeight) {
            y = btnEle.parentNode.offsetHeight - btnEle.offsetHeight;
        } else {
            y = y;
        }
        btnEle.style.left = x +"px";
        btnEle.style.top = y +"px";
    }
}
function end(){
    flag = false; 
}
btnEle.addEventListener("touchstart",function(){
    down();
},false);
btnEle.addEventListener("touchmove",function(){
    move();
},false);
btnEle.addEventListener("touchend",function(){
    end();
},false);
btnEle.addEventListener("click", function(event) {
    if (!$scope.isFull) {
        document.querySelector('.col-md-3').style.display = 'none';
        document.querySelector('.invite').style.display = 'none';
        document.querySelector('#matters').classList = 'hidden';
        this.innerText = "退出體驗";
        $scope.isFull = true;
    } else {
        document.querySelector('.col-md-3').style.display = 'block';
        document.querySelector('.invite').style.display = 'block';
        document.querySelector('#matters').classList = 'visible-xs visibile-sm';
        this.innerText = "開始體驗";
        $scope.isFull = false;
    }
});

以上就是直播帶貨app原始碼，實現移動端的按鈕拖動， 更多內容歡迎關注之後的文章