//hkMessage可拖动按钮class 按钮40px*40px
var headerHeight = 0;
var touchwidth = 0;
var touchheight = 0;
//touch.pageX 拖动地点距离y轴的距离
//touch.pageY 拖动地点距离x轴的距离
angular.element(document.getElementsByClassName('hkMessage')).on('touchstart', function(evt) {
var e = event || evt;
e.preventDefault();//阻止其他事件
}).on('touchmove', function(evt) {
var e = event || evt;
e.preventDefault();//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
//console.log(e.targetTouches)
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0]; // 把元素放在手指所在的位置
// 判断拖动左右两边的位置,不能让他移出中间展示框
if(touch.pageX<=20){
touchwidth = 20
}else if(touch.pageX>document.body.clientWidth - 20){
touchwidth = document.body.clientWidth - 20
}else{
touchwidth = touch.pageX;
}
// 判断拖动上下距离,不能让他移出中间展示框
if(touch.pageY<20){
touchheight = 20;
}else if(touch.pageY>document.body.clientHeight - 78){
touchheight = document.body.clientHeight - 78;
}else{
touchheight = touch.pageY;
}
// 给图片赋值
document.getElementsByClassName('hkMessage')[0].style.top = touchheight-20+'px';
document.getElementsByClassName('hkMessage')[0].style.left = touchwidth-20+'px'
}
}).on('touchend', function(evt) {
var e = event || evt;
e.preventDefault();//阻止其他事件
})
touchmove写一个移动端拖动按钮
猜你喜欢
转载自blog.csdn.net/lbchenxy/article/details/103087613
今日推荐
周排行