直播视频网站源码,实现移动端的按钮拖动-阿里云开发者社区

开发者社区> 开发与运维> 正文

直播视频网站源码,实现移动端的按钮拖动

简介: 直播视频网站源码,实现移动端的按钮拖动

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;
    }
});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章