any news?

@antfu What about this PR?

@bobbybol can you please dont create the eventlistener inside the function. if we call this function multiple times, it will create a memory leak.

Hi @OrbisK I can go two ways with this:
A. Make absolutely sure the listener is removed before starting another one, while still having the listener inside the function. Something like:

if (stopDragListener) {
  stopDragListener()
  stopDragListener = undefined
}

B. Have a persistent listener (only attached if ignoreDragging isn't false of course) that compares pointermove coordinates to the point where the original pointerdown occurred. This is a little more involved because now you need to store the coordinates of the original pointerdown event in a variable outside of all the handler functions, but can be mutated by three different event handlers (click, pointerdown, and pointermove),

Let me know which route you prefer, and I will make it happen ☺️.

@bobbybol can you please dont create the eventlistener inside the function. if we call this function multiple times, it will create a memory leak.

Hi @OrbisK I can go two ways with this: A. Make absolutely sure the listener is removed before starting another one, while still having the listener inside the function. Something like:

if (stopDragListener) {
  stopDragListener()
  stopDragListener = undefined
}

B. Have a persistent listener (only attached if ignoreDragging isn't false of course) that compares pointermove coordinates to the point where the original pointerdown occurred. This is a little more involved because now you need to store the coordinates of the original pointerdown event in a variable outside of all the handler functions, but can be mutated by three different event handlers (click, pointerdown, and pointermove),

Let me know which route you prefer, and I will make it happen ☺️.

Why cant we just have the listener at setup level?

(POC)

useEventListener(window, 'pointermove', (e) => {
 if(!isDragging.value)  return
 //...
}

startDragging = ()=>{isDragging.value = true}

We only have one listener on the window. I think this should work, no?

If we want to only add the listener when dragging i think we can use a reactive target like:

const target = computed((()=>{
  isDragging.value ? window : null
})

useEventListener(target, 'pointermove', (e) => {
 //...
}

with this useEventListener should do all the work for us