/*
* 手指拖拽
* options参数控制水平或垂直方向是否可以拖拽
*/
function drag(el, options) {
options.x = typeof options.x !== 'undefined' ? options.x : true; //x方向是否允许拖拽
options.y = typeof options.y !== 'undefined' ? options.y : false; //y方向是否允许拖拽
if (!options.x && !options.y) return;
//当前点的坐标
var curPoint = {
x: 0,
y: 0,
};
//手指按下点坐标
var downPoint = {};
//本次手指按下是否有滑动
var isTouchMove = false;
el.addEventListener('touchstart', handleStart, false);
el.addEventListener('touchmove', handleMove, false);
el.addEventListener('touchend', handleEnd, false);
function handleStart(ev) {
var touch = ev.changedTouches[0];
downPoint.x = touch.pageX;
downPoint.y = touch.pageY;
}
function handleMove(ev) {
//解决拖拽时与页面滚动条的冲突
ev.preventDefault();
isTouchMove = true;
var touch = ev.changedTouches[0];
//移动的距离
var distance = {};
//移动到最终点位置坐标
var movePoint = {
x: 0,
y: 0,
};
//水平方向移动的距离
distance.x = touch.pageX - downPoint.x;
//垂直方向移动的距离
distance.y = touch.pageY - downPoint.y;
if (options.x) {
movePoint.x = distance.x + curPoint.x;
}
if (options.y) {
movePoint.y = distance.y + curPoint.y;
}
move(el, movePoint.x, movePoint.y);
}
function handleEnd(ev) {
if (!isTouchMove) {
//没有移动则不更新当前点的位置信息
return;
}
var touch = ev.changedTouches[0];
curPoint.x += touch.pageX - downPoint.x;
curPoint.y += touch.pageY - downPoint.y;
isTouchMove = false;
}
function move(el, x, y) {
x = x || 0; //x没传默认给0
y = y || 0; //y没传默认给0
//使用translate3d在移动端会开启GPU加速,性能更高
el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
}
}
移动端触屏实现元素拖拽功能
最新推荐文章于 2023-10-10 20:12:30 发布