Wheel-dragging NPM

wheel-dragging

Motivation

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.

Outline

This package provides methods that allows you to turn WheelEvent on and off at any time.

Installation

$ npm i wheel-dragging

Usage

<!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"]);

Note

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.

wheel drag

@infinitebrahmanuniverse/nolb-whe @everything-registry/sub-chunk-3143

0.1.1

4 years ago