[feature] Custom dragging cursor

[dukemadcat]

Would it be possible to add a custom cursor while dragging?

All my attempts to solve this via CSS have failed and I'm wondering if this can be done internally via JS.

[BreadGenie]

Sortable adds certain classes on certain events. When an item is chosen for dragging, sortable by default adds sortable-chosen class to the item. So you can do something like

.sortable-chosen {
	cursor: grabbing;
}

to change the cursor with css

[dukemadcat]

Thank you for the fast answer.

As I explained in my issue, all my attempts to solve this through CSS have failed, which also involves giving the sortable-chosen class this pointer, just like the moved class in the :active state.

In all cases the pointer is assigned as soon as I click, but when the element is moved the pointer changes to the drag cursor.

[Hugos68]

Thank you for the fast answer. As I explained in my issue, all my attempts to solve this through CSS have failed, which also involves giving the sortable-chosen class this pointer, just like the moved class in the :active state. In all cases the pointer is assigned as soon as I click, but when the element is moved the pointer changes to the drag cursor.

I have the same issue, it reverts to the default cursor as soon as I move an item

[Wetoria]

You need set forceFallback: true and set a class to chosenClass.

forceFallback: true,
chosenClass: "sortable-cursor",

.sortable-cusor {
  cursor: grabbing;
}

I use this way solved problem.

@Hugos68 @dukemadcat

I don't know set forceFallback: true has any potential impact.

If someone know this, plz let me konw.

[Hugos68]

@Wetoria It's a solution but still forces you into using forceFallback which is not ideal, ideally you'd be able to have a custom cursor without using a different config

[Wetoria]

@Wetoria It's a solution but still forces you into using forceFallback which is not ideal, ideally you'd be able to have a custom cursor without using a different config

Yep.

And I'm testing this solution. It seem a bad idea. When I dragged to hover another Element, the cursor return to defaut.

[Wetoria]

Finaly, I use https://github.com/SortableJS/Vue.Draggable/issues/815#issuecomment-808420144 this solution.