--- title: jQuery.event.move ---

# jQuery.event.move

## Project

- Github: github.com/stephband/jquery.event.move
- Issues: github.com/stephband/jquery.event.move/issues

## Move events

movestart
  Fired following touchmove or mousemove, when the touch (or mouse) crosses a threshold distance from the position of the mousedown or touchstart.
move
  Fired on every animation frame where a touchmove or mousemove has changed position.
moveend
  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.

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.distX, e.distY
  Distance the pointer has moved since movestart.
e.deltaX, e.deltaY
  Distance the pointer has moved since last move event.
e.velocityX, e.velocityY
  Velocity in pixels/ms, averaged over the last few events.

## How to use move events

{% highlight js %} jQuery('.mydiv') .bind('move', function(e) { // move .mydiv horizontally jQuery(this).css({ left: e.startX + e.deltaX }); }) .bind('moveend', function() { // move is complete! });{% endhighlight %}

## Why not just use raw mouse or touch events?

Well, yes, you could. But jquery.event.move abstracts away the details that need attention when writing this kind of interaction model with mouse and touch events:

- Supports mouse and touch devices, exposing the same event API for both
- Throttles moves to animation frames, preventing unneccesary calls
- Ignores the right mouse button and clicks with modifier keys
- Prevents text selection while moving
- Prevents scrolling of touch interfaces while moving
- Handles multiple touches
- Deals with bug (Chrome, possibly all Android) where changedTouches includes touches which haven't changed
- Handles browser differences where touches in iOS are live objects, where in Android they are static
- Does not bork interaction with form inputs inside moveable nodes
- Suppresses drag and drop events

Move events are intended as 'building blocks' for helping to build interactions. They track individual fingers or a single mouse, and expose properties on their event objects that are useful for detecting gestures.

## What about drag events?

Move events are designed to compliment drag events, where the two have different meanings: drag events are for transferring data while move events are for making interactive interfaces. That said, `movestart`, `move` and `moveend` events deliberately echo `dragstart`, `drag` and `dragend` events, with one significant difference: where the `drag` event fires continuously whether you have moved the pointer or not, the `move` event fires only after the pointer has been moved.

Where both a `dragstart` and any move event are bound to the same node, drag events are suppressed.

## Where is jquery.event.move being used?

It's part of my front-end toolkit, Bolt. It's also used for:

- webdoc.com
- jquery.event.swipe

Do let me know at @stephband if you use it in your project. Cheers!