jquery.event.move

Move events provide an easy way to set up press-move-release interactions on mouse and touch devices.

Demo and docs

stephband.info/jquery.event.move/

Move events

movestart

Fired following mousedown or touchstart, when the pointer crosses a threshold distance from the position of the mousedown or touchstart.

<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>

Move event objects are augmented with the properties:

e.pageX
e.pageY

Current page coordinates of pointer.

e.startX
e.startY

Page coordinates the pointer had at movestart.

e.deltaX
e.deltaY

Distance the pointer has moved since movestart.

Use them in the same way as you normally bind to events in jQuery:

jQuery('.mydiv')
.bind('move', 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!

});