代码之家 › 专栏 › 技术社区 › mahboub_mo

当用户将手指移到文档上时移动图像

touch-event ontouchevent css android javascript

mahboub_mo · 技术社区 · 6 年前

我想在触摸移动设备中移动图像,比如当用户在页面上移动手指时,图像会一直移动并始终保持在用户手指位置,比如web光标,我使用以下代码:

 document.addEventListener('touchmove', this.onMouseMove);
 document.addEventListener('touchStart', this.onMouseMove);
 document.addEventListener('touchEnd', this.onMouseMove);

和

onMouseMove = (e) => {
   const img = document.getElementById('drawing-mouse-pointer');
   img.style.left = `${e.touches[0].clientX}px`;
   img.style.top = `${e.touches[0].clientY }px`;
   console.log(e.touches[0] && e.touches[0].clientY);
}

但是当用户点击然后停止时,图像只移动一次。我怎么能一直用触摸来移动图像呢。

1 回复 | 直到 6 年前

codeWonderland 6 年前

一般来说,我建议使用类似的库 Interact.js ,因此,您可以执行以下操作而不是您所做的操作:

interact('.draggable')
  .draggable({
  // enable inertial throwing
  inertia: true,
  // keep the element within the area of it's parent
  restrict: {
    restriction: "parent",
    endOnly: true,
    elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
  },
  // enable autoScroll
  autoScroll: true
});

其中draggable是要移动的对象的类名。另外,我想指出,在您的代码中,您将事件侦听器附加到文档,如下所示 document.addEventListener('touchmove', this.onMouseMove); 这会将事件侦听器添加到文档中,而不是任何特定对象,因此它不会真正帮助您移动单个元素。如果要将事件附加到特定元素,则需要像这样引用该元素:

let el = document.getElementById('my-el');
el.addEventListener('touchmove', onMouseMove);

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前