SortableJS Sortable, wie der Cursor geändert wird, wenn onMove false zurückgibt ⇐ CSS

[Anonymous]

Ich habe ein Sortable mit einer onMove-Methode, die unter bestimmten Umständen false zurückgibt. Wie kann ich den Cursor auf „nicht zulässig“ ändern, wenn er „false“ zurückgibt, sodass für den Benutzer klar ist, dass er das Element dort nicht ablegen darf? Das habe ich versucht...
https://codepen.io/hobbeschild/pen/wBMoqLL
Ich kann viele Antworten finden, die erklären, wie man den Cursor beim Ziehen ändert, aber es handelt sich um permanente CSS-Lösungen, die nicht dynamisch entsprechend dem onMove-Ereignis sind.
HTML:

Code: Select all

14

Drag me by the handle

2

You can also select text

1

Best of both worlds!

CSS:

Code: Select all

body {
padding: 10px;
}

.glyphicon-move {
cursor: move;
cursor: -webkit-grabbing;
}

.no-drop {
cursor: not-allowed !important;
}

JS:

Code: Select all

// List with handle
Sortable.create(listWithHandle, {
handle: '.glyphicon-move',
animation: 150,
filter: ".disabled",
onMove: function (evt) {
if (evt.related.className.indexOf('disabled') === -1) {
return true;
}
evt.dragged.classList.add('no-drop');
return false;
}
});