[Solved] How to change the default "grabbing" cursor during TouchPan?

[ddenev]

Hi,

I’m trying to utilize the TouchPan directive in order to enable drag-n-drop for a div element.

That div plays the role of a “drag handle” for a QDrawer and I need the cursor to be “col-resize” during the dragging. The default cursor while panning is “grabbing” and I don’t know how to change it.

I tried changing the cursor in the first handler call:

onTouchPan (event) {
  if (event.isFirst) {
    document.documentElement.style.cursor = 'col-resize'
  }
  if (event.isFinal) {
    document.documentElement.style.cursor = ''
  }
}

but this did not work - in the TouchPan.js code, the “grabbing” cursor is set after the call to my handler.

I also don’t want to set the cursor outside of “isFirst” check because that would effectively set the style on every event, which is a lot.

Any ideas?

[ddenev]

Here is the solution (with the help from @eduardodgarciac):

onTouchPan (event) {
  if (event.isFirst) {
    this.$nextTick(() => {
      document.documentElement.style.cursor = 'col-resize'
    })
  }
  if (event.isFinal) {
    // no need to revert the cursor here since TouchPad does this anyway
  }
}