This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-09-21
Channels
- # announcements (12)
- # architecture (26)
- # beginners (165)
- # biff (19)
- # calva (25)
- # circleci (2)
- # clj-kondo (25)
- # clojure (70)
- # clojure-dev (17)
- # clojure-europe (37)
- # clojure-nl (1)
- # clojure-norway (22)
- # clojure-spec (10)
- # clojure-sweden (1)
- # clojure-uk (24)
- # clojurescript (10)
- # clr (9)
- # cursive (17)
- # data-science (2)
- # datahike (1)
- # deps-new (1)
- # dev-tooling (3)
- # emacs (3)
- # events (7)
- # helix (10)
- # honeysql (1)
- # hugsql (3)
- # humbleui (3)
- # hyperfiddle (30)
- # introduce-yourself (3)
- # jobs (1)
- # malli (4)
- # music (1)
- # off-topic (3)
- # pathom (3)
- # polylith (6)
- # portal (7)
- # re-frame (16)
- # reitit (3)
- # releases (3)
- # remote-jobs (1)
- # shadow-cljs (23)
- # xtdb (14)
How is everyone feeling on this weird Thursday..? (for context, bright blue skies right now in Glasgow, but apparently it will be raining torrentially in about 2 hours' time)
Good morning 🙂
TIL: If you attach mouse events to document
, they will keep firing when the mouse cursor leaves the viewport, even the browser window itself. If you attach the events to document.body
they only fire over the viewport. (Yes, I’m making draggable things).
It’s probably well defined behaviour. 😃 I tested in both Safari and Brave. Here’s the code so far:
#?(:cljs
(defn make-draggable [el]
(events/listen
el "mousedown"
(fn [e]
(when (.contains (-> e .-target .-classList) "dragger")
(let [from (atom {:x (.-clientX e)
:y (.-clientY e)})]
(letfn [(mousemove-fn [e]
(let [{:keys [x y]} @from
x' (.-clientX e)
y' (.-clientY e)]
(reset! from {:x x' :y y'})
(set! (-> el .-style .-left) (str (+ (.-offsetLeft el) (- x' x)) "px"))
(set! (-> el .-style .-top) (str (+ (.-offsetTop el) (- y' y)) "px"))
(set! (-> el .-style .-right) "unset")))
(mouseup-fn [_]
(events/unlisten js/document.body "mousemove" mousemove-fn)
(events/unlisten js/document "mouseup" mouseup-fn))]
(events/listen js/document.body "mousemove" mousemove-fn)
(events/listen js/document "mouseup" mouseup-fn))))
(.stopPropagation e)))))
Before I discovered this with the document events (by pure chance) I had to track mouseleave
and got into trouble making that stable. It also didn’t allow me let the user drag a bit outside the viewport and keep dragging when the cursor entered again. The above creates a lot of the behaviour I’m after, with less irrelevant logic.(It’s the mouseup-fn
that I want firing outside the viewport, unless that wasn’t super clear 😃 ).
Haven’t tried with window, @UE72GJS7J. I came from the other direction, having had attached them the events to the element itself. 😃 I’ll try with window now and see what gives.
Now tried with window
and afaict I get the exact same behaviour as with document
. Dunno what to make of that…
I think window is the top-level of the event chain, so events will always bubble up to the global event handler on window unless you call stopPropagation
Yeah probably! It will bubble up to all event handlers on the parent elements unless you stop it
There are also events specifically related to dragging btw... they let you put data onto the clipboard so it can be pasted when you drag outside of the browser window: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations
Yeah, it’s a bit confusing with the naming of that draggable attribute. But it sure is great for those drag-n-drop situations. Too bad it’s not available for SVG.
morning
Just noticed that a new update to slack restores the ability to expand out all the workspaces that one is participating in - workspace switcher. Phew! Anxiety levels decreasing....
thank you!
Good morning! Taught a coworker some vim editing stuff today. Feels like sharing spells

