html移动端屏幕拖动,JavaScript移动端div拖动效果

51前端

.div {

width: 100px;

height: 100px;

position: absolute;

background-color: red;

}

window.onload = function () {

var oDiv = document.getElementsByClassName('div')[0];

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;

//console.log(disX);

});

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) {//限制拖拽的X范围，不能拖出屏幕

L = 0;

}

else if (L > document.documentElement.clientWidth - this.offsetWidth) {

L = document.documentElement.clientWidth - this.offsetWidth;

}

if (T < 0) {//限制拖拽的Y范围，不能拖出屏幕

T = 0;

}

else if (T > document.documentElement.clientHeight - this.offsetHeight) {

T = document.documentElement.clientHeight - this.offsetHeight;

}

moveX = L + 'px';

moveY = T + 'px';

this.style.left = moveX;

this.style.top = moveY;

});

window.addEventListener('touchend', function (e) {

//alert(parseInt(moveX))

//判断滑动方向

});

}