draggable onDrag hitTest with a timer

[phoenixrip]

Hi gsap gurus.

 

Just wondering what the smartest way of setting some kind of timer / timeout in a hitTest that is occurring in the onDrag function, so that I can run a function/animation only if the hitTest has been true for more than 0.8 seconds?

 

Thanks in advance

 

 

[Carl]

I'd hesitate to say this is the smartest way, but it seems to meet the requirements.

In simple terms, as soon as the onDrag detects a hit I record the hitStartTime I then fire a function every 0.2 seconds using delayedCall to check if the hitTest is still true. 

 

I didn't comment it a ton but the console logs should give you an idea of what is happening as you drag

 

console.clear();
var hitStartTime = 0;
var maxHitTime = 500 //ms


Draggable.create(".green", {
  type: "x,y",
  onDrag: function() {
    if (this.hitTest(".orange") && hitStartTime == 0) {
      hitStartTime = Date.now();
      console.log("first hit", hitStartTime)
      TweenLite.delayedCall(0.2, startCount)
    }
  }
});


function startCount() {
  if (Draggable.hitTest(".green", ".orange")) {
    console.log("still hitting");
    if (Date.now() - hitStartTime > maxHitTime) {
      console.log("maxHitTime exceeded");
      hitStartTime = 0;
      //do this after maxHitTime exceeded
      TweenLite.set("body", {backgroundColor:"hsl(" + parseInt(Math.random() * 255) + ", 100%, 50%)"})
      TweenLite.set("h1", {color:"hsl(" + parseInt(Math.random() * 255) + ", 100%, 50%)"})
    } else {
      //check again in 0.2 seconds
      TweenLite.delayedCall(0.2, startCount)
    }
  } else {
    console.log("done hitting")
    hitStartTime = 0;
  }
}

 

https://codepen.io/GreenSock/pen/wdKjqr?editors=1011

[OSUblake]

Here's another way to do this. Create a flag and a paused delayedCall. The flag is just a quick way to let you know that the timer has started.

 

If you detect a hit and the flag is false, restart the delayedCall and set the flag. If the flag is set and you detect a hit, do nothing. If the flag is set and there is no hit, pause the delayedCall and clear the flag. 

var draggable = new Draggable(foo, {
  onDrag: function() {
    
    // We're not hitting the target
    if (!this.hitTest(hitTarget)) {
      
      // We were hitting the target
      if (this.hitID) {
        this.hitID = 0;
        this.hitTimer.pause();
      }      
      return;
    }
        
    // We just hit the target
    if (!this.hitID) {
      this.hitID++;
      this.hitTimer.restart(true);
    }    
  }
});

draggable.hitID = 0;
draggable.hitTimer = TweenLite.delayedCall(0.7, function() {
  // your callback
}).pause();

See the Pen ?editors=0011 by osublake (@osublake) on CodePen

.

[phoenixrip]

Yes :)

Both of these work perfectly! Wish I could mark both as solved. Thank you both so much for such quick and easy to understand answers!

 

Blake I'm now wondering for a different but similar interface if there is an easy way of applying a similar sort of delay to your beautiful SortableGrid example, so that instead of switching positions in the array and re-laying out every element you hover over on your way to a new location, it only switches the none dragged item with the empty spot when you've been over its row/col for a little bit (preserving the order of the rest of the array a little more deliberately).

 

I'm gonna have a go at this myself, but I figured since the master is here I might ask

 

Thanks again guys! Really appreciate it.

[OSUblake]

Hi @phoenixrip,

 

This delayed callback should work with that sortable grid. I've done something similar, only swapping tiles on release.