window-drag

platform: Windows Currently only supports Windows, and will support Mac and Linux in the future

it's a solution for window dragging in Electron applications.

Frameless windows can be dragged using the [-webkit-app-region][region] css property, but this way to drag windows have many problems.

• Right clicking on the draggable area will bring up the native context-menu.
• use [-webkit-app-region:no drag] within the draggable area to exclude some areas that require interaction. Otherwise, the elements that require interaction will hardly be able to respond to all mouse events, including clicks, dragging, etc
• ...

this is a native plugin which use the Node-API to build, so it follow the ABI

Installation

To install this package, just run

$ npm install window-drag

Quick start

The following example shows how to use it.

in your renderer process bind mouseDown event

 <div @mousedown="onMouseDown">
 ...
const { onMouseDown } = window.api.useDrag() // Expose useDrag() in preload

define the useDrag

const useDrag = () => {
  const windowDrag = window.native.windowDrag

  const onMouseDown = (e: MouseEvent) => {
    // if right click, do nothing
    if (e.button === 2) return
    // if left click, start drag
    windowDrag.startDrag()
    document.addEventListener('mouseup', onMouseUp, { once: true })
  }
  const onMouseUp = () => {
    windowDrag.stopDrag()
  }
  return {
    onMouseDown
  }
}