具有恒定DOM操作的Drag / Touchmove事件

Question

I am looking to implement some Mobile Components using native Javascript and AngularJS.

While, I was working on creating a Pull To Refresh directive for AngularJS, I used touchmove event on a UL list. I was trying to pull a hidden div on top of a list with custom models to show status message.

I used touchmove event on the UL to create an effect of pulling by changing CSS3 translate property for the div. I was facing issue that the transition was happening after I finish touching the screen but not while I was dragging my touch.

Please help and throw in more details about the touchmove event.

Answer 1

Touch events

First of all, if you work on mobile devices and know a little about javascript you should write your own functions for the specific things that you need.So don't use libraries like angular, jquery or whatever ... it's only performance loss.

all you need is:

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

& to test:

 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

Use translate3d() as it activates the gpu hardware acceleration. not just translate()

---

As your question is not very specific i can't add more info right now but...

Here are some examples using touch/mousemoves they may help you

Swipe & fastclick

http://jsfiddle.net/uRFcN/

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

Radial Menu

http://jsfiddle.net/yX82S/

Slider

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

Some UI elements

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

try to swipe the main content or mousedown drag left right.

code.

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

---

There is also a css trick that allows you to use the native scroll without the annoyng whole page move..So you don't have to use a library to scroll.

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>