How to customize the cursor on the SortableJS plugin when drag an item

Question

I need help please ! :D I can't find how to change the cursor when dragging with the "SortableJS" plugin (SortableJS).

I use the plugin without react, the basic one in a table to move the rows.

Thanks in advance ! :D

Answer 1

For the ones that fall here from G like me, something like this will do it:

var grid = document.getElementById('grid');
new Sortable(grid, {
    animation: 150,
    swap: true,
    swapThreshold: 0.65,
    ghostClass: 'dragFrom',
    swapClass: 'dragTo',
    forceFallback: true, // This is it!
    onChoose: function(e) {
        e.target.classList.add('grabbing');
    },
    onUnchoose: function(e) {
        e.target.classList.remove('grabbing');
    },
    onStart: function(e) {
        e.target.classList.add('grabbing');
    },
    onEnd: function(e) {
        e.target.classList.remove('grabbing');
    },
  onMove: function(e) {
        e.target.classList.add('grabbing');
    },
});

.grabbing * {
    cursor: grabbing !important;
}
.grid {
  margin:0;
  padding:0;
}
.grid-square {
  margin:5px;
    display: inline-block;
    background-color: #fff;
    border: solid 1px rgb(0,0,0,0.2);
    text-align: center;
    cursor: grab;
  padding-top:35px;
  width:75px;
  height:50px;
}
.grid-square:active {
    cursor: grabbing!important;/* fighting on all fronts */
}
.dragFrom{
    background-color: #48b4e6!important;
}

.dragTo {
    background-color: #30ec5f!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
 
<div id="grid">
    <div class="grid-square">1</div>
    <div class="grid-square">2</div>
    <div class="grid-square">3</div>
    <div class="grid-square">4</div>
    <div class="grid-square">5</div>
    <div class="grid-square">6</div>
</div>

The forceFallback: true, line is the key to bypass the issue pointed by Arthur in his comment to the question post.

The onChoose, onUnchoose, onStart, onEnd and most CSS are my dirty solution after testing some times. Hope this helps someone.

Answer 2

I found the issue to be with the pointer-events:none; inline style applied to the .sortable-drag element that is created when you start dragging a list item.

I believe sortablejs animations and functionality works based on the cursor position and pointer events needs to be disabled for it to work correctly.

If this overridden with !important the cursor grab and grabbing works, but actually disables the sorting animation and the item that is moved goes straight to the end of the list. I think this is why it never quite works the way we expect.

Answer 3

It looks like SortableJS automatically adds .sortable-chosen class to the item that's being moved.

You just need a bit of CSS, like so:

.sortable-chosen {
    cursor: grabbing !important;
}

Hope this helps!