I am using velocity.js to animate a draggable SVG element as it is dragged by the user. However, velocity.js queues the previous mousemove co-ordinates & animates through all the subsequent mousemove co-ordinates. What I want is velocity.js not to queue the co-ordinates but animate to the latest co-ordinates as passed on by the function.
Check this jsFiddle
document.addEventListener("mousedown",mouseDown);
document.addEventListener("mouseup",endMove);
var click=false;
var clickX, clickY;
var moveX=0, moveY=0;
var lastMoveX=0, lastMoveY=0;
function mouseDown(evt){
evt.preventDefault();
var element=(typeof (window.event) !=='undefined') ? evt.srcElement:evt.target;
if(element.id==="mycirc")
{
click=true;
clickX = evt.clientX;
clickY = evt.clientY;
}
document.addEventListener("mousemove",moveboth);
return false;
}
function movexaxis(evt)
{
var clx=evt.clientX-clickX;
moveX = lastMoveX + clx;
return moveX;
}
function moveyaxis(evt)
{
var cly=evt.clientY-clickY;
moveY = lastMoveY + cly;
return moveY;
}
function moveboth(evt){ setTimeout(function move(){
evt.preventDefault();
var a=document.getElementById("mycirc");
if(click){
movexaxis(evt);
moveyaxis(evt);
Velocity(a,{translateX: moveX},{duration:"0ms"}, {queue:false});
Velocity(a,{translateY: moveY },{duration:"0ms"},{queue:false});
Velocity(a,"stop");
}
},34);
}
function endMove(evt){
click=false;
lastMoveX = moveX;
lastMoveY = moveY;
}