search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.78k stars 3.7k forks source link

[feature] Custom dragging cursor #2276

Open dukemadcat opened 1 year ago

dukemadcat commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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