The specification of drag and drop has the following description.
From the moment that the user agent is to initiate the drag-and-drop operation, until the end of the drag-and-drop operation, device input events (e.g. mouse and keyboard events) must be suppressed.
A bad consequence of this restriction is that mousewheel can't be used to scroll pages or containers while dragging something. If you use HTML Drag and Drop API to sort a list that owns a large number of items, it will lead to a bad UX.
This package provides methods that allows you to turn WheelEvent on and off at any time.
$ npm i wheel-dragging
<!DOCTYPE html>
<html>
<body>
<div id="draggable">
</body>
</html>import WheelDragging from "wheel-dragging";
// You should create a instance after DOMContentLoaded.
const wheelDragging = new WheelDragging();
// The events you want to monitor need to be added after this method is called.
wheelDragging.init();
const target = document.getElementById("draggable");
target.addEventListener("dragstart", () => {
wheelDragging.removeWheelListeners();
});
target.addEventListener("dragend", () => {
wheelDragging.restoreWheelListeners();
});By adding EventMap to the constructor argument, it is possible to omit the method execution.
const wheelDragging = new WheelDragging(["dragstart"], ["dragend"]);- Events must be assigned after the init method of this package is called.
- Events in Iframes can also be monitored. However, follow the above rules for assigning events.