Jump to content
GreenSock

Cyboide

Draggable cursor

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

Hi,

 

Is there a way to change the cursor option of the Draggable object after it is created?

Link to comment
Share on other sites

yourDraggable.vars.cursor = "move"; //or whatever

If you need to get your draggable instance, you can use get(), like:

Draggable.get("#yourID").vars.cursor = "move"; //or whatever

That'll affect the cursor the next time the user interacts with the element - it's not for immediately changing the cursor. 

  • Like 1
Link to comment
Share on other sites

Well... it is not working.

I traced the Draggable object in the console after applying the change, and the cursor prop is indeed changed, but the cursor, visually, doesn’t really change when interacting again with the object.

Link to comment
Share on other sites

Ok I see what you meant by "next interaction" ; sorry.

 

In my project I use a "n-resize" (arrow down) to show the user you can drag that object downward. Then, the object (well, it’s parent) is rotated -90°, so that the dragging now occurs on the other axis. So I change the cursor for the "e-resize" (arrow pointing horizontally).

But this is not very user-friendly, since the user, before actually clicking, sees an arrow pointing in the wrong direction.

 

Is there anyway I can force the style to update right away?

Link to comment
Share on other sites

Right now I have to change the CSS cursor style of the object directly, on top of vars.cursor. I guess it is not much of a hassle.

Draggable.get(object).vars.cursor = "e-resize";
object.style.cursor = "e-resize";
Link to comment
Share on other sites

Yep, that's a good solution. Do that. :)

Link to comment
Share on other sites

  • 1 year later...

I need to completely disable Draggable's control of the cursor icon.

 

This is so that I can use the grabby hands cursors where supported via CSS:

 

.grabbable {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
 
/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
 
Is that possible? Thanks!
  • Like 1
Link to comment
Share on other sites

Hi felixturner  :)

 

pls try like this : 

 

.grabbable {
cursor: move !important;
cursor: grab !important;
cursor: -moz-grab !important;
cursor: -webkit-grab !important;
}
  • Like 2
Link to comment
Share on other sites

  • 11 months later...

Figured this out, to overwrite cursor with an image. I will need to put !important

 

In CSS:

.grabbable {
	cursor: url('../images/cursor.png') 32 32, auto !important;
}

.grabbable:active {
	cursor: url('../images/cursor-active.png') 32 32, auto !important;
} 
  • Like 2
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.
×