Skip to content

Instantly share code, notes, and snippets.

Last active December 25, 2023 10:47
  • Star 12 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save dz4k/6505fb82ae7fdb0a03e6f3e360931aa9 to your computer and use it in GitHub Desktop.
Draggable window in _hyperscript
-- Usage: _="install Draggable(dragHandle: .titlebar in me)"
behavior Draggable(dragHandle)
if no dragHandle set the dragHandle to me
on pointerdown(clientX, clientY) from dragHandle
halt the event
trigger draggable:start -- hooks, e.g. for adding a drop shadow while dragging
measure my x, y
set xoff to clientX - x
set yoff to clientY - y
repeat until event pointerup from document
wait for pointermove(pageX, pageY) or
pointerup (pageX, pageY) from document
add { left: ${pageX - xoff}px; top: ${pageY - yoff}px; }
trigger draggable:move
trigger draggable:end
Copy link

Is this live somewhere that could serve as a demo?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment