Over / Out events on Draggable

[weatherbrow]

Hello,

 

Is there any existing method in create() of setting up events triggered when Draggable objects have mouse over / out? 

 

Thanks!

[Jonathan]

Hello weatherbrow, and Welcome to the GreenSock Forum!

 

I don't see anything in the GSAP Docs for detecting hover events. There are methods for hitTest(), to detect when two elements collide with each others space.

 

But you could just try and create hover event handlers for the element or element(s) you are hovering over.

 

Using jQuery on() method to bind events for hover, mouseenter and mouseleave

 

Example:

See the Pen ZYOjKK by jonathan (@jonathan) on CodePen

 

// set initial drag position
TweenLite.set("#dragme",{x:30,y:30});

// Create Draggable instance
Draggable.create("#dragme", {type:"x,y",
	bounds:"#container",
	edgeResistance:0.5,
	throwProps:true
});

// using jquery on() method to bind hover events for cross browser
$(document).on("mouseenter", "#dragme", function(){
  
     console.log("mouse enter element");
  
}).on("mouseleave", "#dragme", function(){
  
     console.log("mouse leave element");
  
});

:

I hope this helps!