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



  • 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?



  • 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
      }
    }
    

Log in to reply