javascripttimerhtml5-canvaskineticjs

How can I time the length of a drag/drop event on a HTML5 canvas? (KineticJS)


I am trying to create an application in which a user is required to drag a Kinetic.Image object for a requisite length of time (in this case 5 seconds); this is going to be used to ensure that they do not move on to the next stage without having performed the task in hand. I am using KineticJS for my application. Is this possible with some combination of the dragstart, dragmove and dragend event handlers?


Solution

  • I've now come up with a solution myself, so putting it here for anyone who may be interested. The simplest way to do this, I believe, is to just take a timestamp in the dragstart and do the same in the dragend and perform a diff. Increment a global counter variable with the difference, and then do a check in the dragend to see if that counter is over the required amount.

    object1.on("dragstart", function() { lastTimestamp = Date.now(); });
    object1.on("dragend", function() { timeTaken = Date.now() - lastTimestamp; });