Jump to content
Search Community

Draggable cursor

Cyboide 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

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

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

  • 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

  • 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.
×
×
  • Create New...