Drag, drop and mousewheel?

Question

Short version: Can mouse wheel events be fired while in the middle of a drag+drop operation?

Long version:

I'm currently in the design phase for this particular feature, so I don't have any code yet. I'm asking this so I know if it's a waste of time to pursue this path, so I can design something else instead.

Basically, I have a list of items on one side, and a basket on the other. As it stands right now, each item has an input box and a button so you can type the quantity and add it to the basket (and same thing in reverse). I want to add drag and drop functionality so you can just drag items one way or the other. This works fine if you only want one of the item, but I'd like to add a way to adjust the quantity while dragging. The mouse wheel came to mind, since you're already using the mouse to drag in the first place.

So before I dive into the code, I need to know if it's actually possible to receive mouse wheel events during a drag, and if so where should I add the listener?

Answer 1

If you want to check if the primary mouse button is being pressed during a wheel event, you can use the following:

addEventListener('wheel', function (event) {
  if (event.buttons & 1) {
    alert("You scrolled while the primary mouse button was down!");
  }
}

Unfortunately, if you're using the Drag and Drop API with the draggable='true' attribute, wheel and scroll events are not fired during a drag, so you will be unable to fire and handle a scroll event.