*UPDATE 2.0.0*: `move` events are now compatible with jQuery 3.x. In addition, the underlying implementation is rewritten using vanilla DOM (where before it was jQuery special events only) – jQuery is no longer a requirement.
Move event objects are augmented with the properties:
var node = document.querySelector('.mydiv');
// A movestart event must be bound
// and explicitly enabled
node.addEventListener('movestart', function(e) {
e.enableMove();
});
node.addEventListener('move', function(e) {
// move .mydiv horizontally
this.style.left = (e.startX + e.distX) + 'px';
})
node.addEventListener('moveend', function() {
// move is complete!
});
.enableMove()
is a necessary performance optimisation
(that works around the DOM's lack of event inspection).
jQuery('.mydiv')
.on('move', function(e) {
// move .mydiv horizontally
jQuery(this).css({ left: e.startX + e.distX });
})
.on('moveend', function() {
// move is complete!
});
(jQuery's special event system does the work of enabling
move events so there is no need to explicitly bind to
movestart
.)
Well, yes, you can. But move events abstract away the details that need attention when writing this kind of interaction model with mouse and touch 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.
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 main 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, and only on animation frames.
Where both a dragstart
and any move event are bound to the same node, drag events are suppressed.