javascript - 具有恒定 DOM 操作的拖动/触摸移动事件

Question

我希望使用 native Javascript 和 AngularJS 实现一些移动组件。

虽然我正在为 AngularJS 创建一个 Pull To Refresh 指令，但我在 UL 列表上使用了 touchmove 事件。我试图在带有自定义模型的列表顶部拉出一个隐藏的 div 以显示状态消息。

我在 UL 上使用了 touchmove 事件，通过更改 div 的 CSS3 翻译属性来创建拉动效果。我遇到的问题是，过渡是在我完成触摸屏幕后发生的，而不是在我拖动触摸时发生的。

请帮助并提供有关 touchmove 事件的更多详细信息。

Answer 1

触摸事件

首先，如果你在移动设备上工作并且对 javascript 有所了解，你应该为你需要的特定事物编写自己的函数。所以不要使用像 angular、jquery 或其他任何东西的库......它只是性能损失。

你只需要:

 document.addEventListener('touchstart',ts,false);
 document.addEventListener('touchmove',tm,false);
 document.addEventListener('touchuend',te,false);

& 测试:

 document.addEventListener('mousedown',ts,false);//set mouseISDown to true
 document.addEventListener('mousemove',tm,false);//check if mouse is down
 document.addEventListener('mouseup',te,false);//set mouseISDown to false

---

CSS

使用 translate3d() 激活 gpu 硬件加速。不仅仅是translate()

---

由于您的问题不是很具体，我现在无法添加更多信息，但是...

这里有一些使用 touch/mousemoves 的例子，它们可能对你有帮助

滑动和快速点击

http://jsfiddle.net/uRFcN/

https://stackoverflow.com/a/17567696/2450730

径向菜单

http://jsfiddle.net/yX82S/

slider

http://jsfiddle.net/LxX34/11/

一些界面元素

http://cocco.freehostia.com/scripts/SnapLightMT%20v0.2%20by%20cocco%20(1).html

尝试滑动主要内容或用鼠标向下拖动。

代码。

http://cocco.freehostia.com/scripts/highlight.html

---

还有一个 css 技巧，允许您使用原生滚动而无需烦人的整个页面移动..因此您不必使用库来滚动。

CSS

.scrollable{-webkit-overflow-scrolling:touch;}
.scrollable,.scrollable>div{width:100%;height:100%;overflow:auto;}
.scrollable>div>div{min-height:101%;}

html

<div class="scrollable"><div><div></div></div></div>