Draggable cursor

[Cyboide 2 Likes (Newbie)]

Hi,

 

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

[GreenSock 8,117 Likes (Superhero)]

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. 

[Cyboide 2 Likes (Newbie)]

Cool, thank you Jack!

[Cyboide 2 Likes (Newbie)]

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.

[Cyboide 2 Likes (Newbie)]

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?

[Cyboide 2 Likes (Newbie)]

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";

[GreenSock 8,117 Likes (Superhero)]

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

[felixturner 1 Likes (Newbie)]

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!

[Diaco 1,948 Likes (Superhero)]

Hi felixturner 

 

pls try like this : 

 

.grabbable {
cursor: move !important;
cursor: grab !important;
cursor: -moz-grab !important;
cursor: -webkit-grab !important;
}

[felixturner 1 Likes (Newbie)]

Hi Diaco,

 

that works thanks! Gotta love !important.

[venn 23 Likes (Newbie)]

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;
}