UNPKG

swipe-list

Version:

Infinite scroll replacement for weak mobile devices.

61 lines (40 loc) 1.85 kB
<h1>jquery.event.move</h1> <p>Move events provide an easy way to set up press-move-release interactions on mouse and touch devices.</p> <h2>Demo and docs</h2> <p><a href="http://stephband.info/jquery.event.move/">stephband.info/jquery.event.move/</a></p> <h2>Move events</h2> <dl> <dt>movestart</dt> <dd>Fired following mousedown or touchstart, when the pointer crosses a threshold distance from the position of the mousedown or touchstart.</dd> <dt>move</dt> <dd>Fired on every animation frame where a mousemove or touchmove has changed the cursor position.</dd> <dt>moveend</dt> <dd>Fired following mouseup or touchend, after the last move event, and in the case of touch events when the finger that started the move has been lifted.</dd> </dl> <p>Move event objects are augmented with the properties:</p> <dl> <dt>e.pageX<br/>e.pageY</dt> <dd>Current page coordinates of pointer.</dd> <dt>e.startX<br/>e.startY</dt> <dd>Page coordinates the pointer had at movestart.</dd> <dt>e.deltaX<br/>e.deltaY</dt> <dd>Distance the pointer has moved since movestart.</dd> <dt>e.velocityX<br/>e.velocityY</dt> <dd>Velocity in pixels/ms, averaged over the last few events.</dd> </dl> <p>Use them in the same way as you normally bind to events in jQuery:</p> <pre><code class="js"> jQuery('.mydiv') .bind('movestart', function(e) { // move starts. }) .bind('move', function(e) { // move .mydiv horizontally jQuery(this).css({ left: e.startX + e.deltaX }); }).bind('moveend', function() { // move is complete! }); </code></pre> <p>To see an example of what could be done with it, <a href="http://stephband.info/jquery.event.move/">stephband.info/jquery.event.move/</a></p> <h2>Tweet me</h2> <p>If you use move events on something interesting, tweet me <a href="http://twitter.com/stephband">@stephband</a>!</p>