900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 移动端 touch 实现 拖动元素

移动端 touch 实现 拖动元素

时间:2023-04-18 16:38:11

相关推荐

移动端 touch 实现 拖动元素

var homeMove = (function () {

//touch自适应

var k = "ontouchend" in window ? "touchend" : "click";

var isdrag = false;

var moveid = document.getElementById("moveid");

var sWidth = document.body.clientWidth;

var sHeight = document.documentElement.clientHeight; //window.screen.height;

var width = moveid.offsetWidth;

var height = moveid.offsetHeight;

var tx, x;

var ty, y;

var i = 0, j = 0; ;

function movemousex(e) {

e.preventDefault();

if (isdrag) {

var n = tx + e.touches[0].pageX - x;

var maxWidth = sWidth - width;

if (n > maxWidth) {

n = maxWidth;

} else if (n < 0) {

n = 0;

}

$('#moveid').css("left", n);

return false;

}

}

function selectmousex(e) {

isdrag = true;

tx = parseInt(moveid.offsetLeft + 0);

x = e.touches[0].pageX;

return false;

}

function movemousey(e) {

e.preventDefault();

if (isdrag) {

var n = ty + e.touches[0].pageY - y;

var maxHeight = sHeight - height;

if (n > maxHeight) {

n = maxHeight;

} else if (n < 0) {

n = 0;

}

$('#moveid').css("top", n);

return false;

}

}

function selectmousey(e) {

isdrag = true;

ty = parseInt(moveid.offsetTop + 0);

y = e.touches[0].pageY;

return false;

}

function addMoveEvent() {

moveid.addEventListener('touchend', function () {

isdrag = false;

});

moveid.addEventListener('touchstart', selectmousex);

moveid.addEventListener('touchmove', movemousex, false);

moveid.addEventListener('touchstart', selectmousey);

moveid.addEventListener('touchmove', movemousey, false);

moveid.onclick = function () {

window.location.href = "/";

}

}

return { addMoveEvent: addMoveEvent };

} ());

$(function () {

homeMove.addMoveEvent();

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。