Jump to content
Search Community

Control draggable with mousewheel/up & down keys

martis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,


Was wondering if anyone has a solution for controlling a draggable instance using mousewheel and the arrow keys? I saw this post that explains how to control the scrollbar using mousewheel




but nothing in regards to Draggable. I would love to use ThrowProps, and snapping in the solution. Thanks!

Link to comment
Share on other sites

Hello martis,


The arrow key event handler looks like this:

// bind arrow keys: up, down, left, right
$(document).on("keyup", function(e){
	if(e.keyCode == 37){
               // left arrow
               console.log("left arrow");
	} else if(e.keyCode == 38){ 
               // up arrow
               console.log("up arrow");
	} else if(e.keyCode == 39){ 

	       // right arrow
               console.log("right arrow");			
	} else if(e.keyCode == 40){
               // down arrow
               console.log("down arrow");			
	return false;

And here is the MouseWheel event handler:

// MouseWheel event
$(document).unbind('mousewheel DOMMouseScroll').on('mousewheel DOMMouseScroll', function(evt) {

    var delta = (evt.originalEvent && evt.originalEvent.detail < 0) || evt.wheelDelta > 0 ? 1 : -1;

    if (delta < 0) {

          // scroll down
          console.log("scroll down");
    } else {

          // scroll up
          console.log("scroll up");

I hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...