Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
eloisem

Change cursor when grabbing an item

Recommended Posts

Hello,

I've been looking for a way to keep my cursor as a grab when the item is not been dragging and to grabbing when the item is being dragging but then come back to grab when the user stop dragging the item. 

 

I don't know if I was clear but it's similar to this cursor action: http://fetedelabiere.promo-agency.com/

 

 

Here's part of my code where I managed to make change the cursor when the drag starts but not when the user stops

 Draggable.create(div1, {
        type: 'x,y',
        bounds: parent,
        edgeResistance: 1,
        onDrag: function() {
          childX.html(this.x);
          childY.html(this.y);
        }
      });
      Draggable.get("#div1").vars.cursor = "grabbing";
Link to post
Share on other sites

Hello eloisem and Welcome to the GreenSock Forum,

 

You can use the Draggable property cursor, to set the initial CSS cursor property to grab for when hovered. And then onDragStart set the cursor to grabbing for when you start dragging.

 

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


 

Draggable.create("#dragme", {
  throwProps: true,
  bounds: window,
  edgeResistance: 0.7,
  cursor: "grab", /* set initial cursor to grab */
  onDragStart:function(){
       TweenLite.set("#dragme",{cursor:"grabbing"});
  },
  onDragEnd:function(){
       //TweenLite.set("#dragme",{cursor:"grab"}); /* optional but not needed */
  }
});

The cursor sets the hover state (roll over) based on the Draggable Plugin Docs:

  • cursor : String - by default (except for type:"rotation"), the cursor css property of the element is set to "move" so that when the mouse rolls over it, there's a visual cue indicating that it's moveable, but you may define a different cursor if you prefer (as described at http://devdocs.io/css/cursor) like cursor:"pointer".

Does that help :)

  • Like 2
Link to post
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.

×