Vue.draggable: Change cursor while dragging

[KevangPatel]

I want to change cursor while dragging the element. PLease help!!!!

[sarahLardeau]

I want too !!! I figured out we cannot do it easily because of the css pointer-event: none set on the style of the sortable-chosen item... Anyone have a workaround ?

[sarahLardeau]

For those who will end up here. I found those issues that helpt me

• https://github.com/SortableJS/Sortable/issues/246
• https://github.com/SortableJS/Sortable/issues/515.

I finally manage to change the cursor while dragging by adding a class on the <html/>.
Here a simple example :

global.css

.grabbing * {
    cursor: grabbing !important;
}

myComponent.vue

<draggable
            draggable=".draggable"
            group="properties"
            filter=".ignore-draggable"
            :forceFallback="true"
            :preventOnFilter="false"
            @end="onDragEnd"
            @start="onStart"
        >
[...]
onDragEnd: function(e): void {
    const className = 'grabbing';
    const html = document.getElementsByTagName('html').item(0);
    if (html && new RegExp(className).test(html.className) === true) {
        // Remove className with the added space (from setClassToHTMLElement)
        html.className = html.className.replace(
            new RegExp(' ' + className),
            ''
        );
        // Remove className without added space (just in case)
        html.className = html.className.replace(new RegExp(className), '');
    }
}
onStart: function() {
    const className = 'grabbing';
    const html = document.getElementsByTagName('html').item(0);
    if (html && new RegExp(className).test(html.className) === false) {
        html.className += ' ' + className; // use a space in case there are other classNames
    }
}

[David-Desmaisons]

@sarahLardeau thanks for documenting your solution.

[Autumnwater]

@sarahLardeau 3q，good boy 。欢迎来四川