Delete draggable item when out of bounds

[johnnyqueue]

Hi there,

 

Just starting out with Draggable and am having some fun.  However, I'm trying to do something that I'm unable to figure out and am hoping someone can help me out.

 

I am trying to delete/remove/kill a draggable item when it is dragged out of bounds.  I'm not sure which event to use, nor how to delete/remove/kill active draggable item.

 

I am using this CodePen as the basis for my experimentation:  

 

See the Pen Jlfsq by rhernando (@rhernando) on CodePen

 

 

 Any help is appreciated

Johnny

[Carl]

Hi and welcome to the GreenSock forums,

 

There isn't an onOutOfBounds event or anything similar in the API that will detect when an element goes out of bounds for you but there are enough hooks to whip something up. You would just have to run your own logic onDrag to see if the element has gone beyond the bounds.

Fortunately there are values like minX, maxX, minY and maxY that make it relatively straightforward to know what the bounds values are.

 

I got the solution from a much more advanced demo from Jack that progressively fades out the element as it leaves the bounds. See that here and look at the code:

 

See the Pen irzvd?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Checking to see if the element is fully outside the bounds is not so bad, you just have to check on every up, down, right and left. Sort of like:

 

See the Pen KqxLMV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

 

[johnnyqueue]

Excellent!  Exactly what I needed.  Thank you.

[OSUblake]

You can also do a hit test...

if (!this.hitTest(container)) {
  TweenLite.set(this.target, {background:"red"});
  this.kill();
} 

 

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

 

[Carl]

very clever, Blake!