I’m looking to implement a small environment with click/tap and drag to reposition arbitrary elements across a webpage, not needing much more than the basic features of
- boundary detection in a frame
- location tracking statewide. Pretty trivial with subscriptions
- collision detection
- playing well with mobile scrolling
- keyboard accessibility?
Do note the small difference from drag-and-drop, where unsuccessful repositions snap elements back.
Examples
I found an older example from @borkdude here demo, source which implements most of what’s necessary in native cljs. No mobile support.
Also turning to applications whose complexity needs a lot more from click and drag, i.e sas like Whimsical, where positionable layout is the backbone. It’s clear Whimsical uses paper.js within or alongside reagent. However they just forego editing on mobile.
Conan Cook wrote up about touch-and-drag several years ago here, demo which partially realizes the premise with cljsjs.hammer, but dragging any part of the canvas moves the element, and overall still collides with mobile scrolling. (Also I think cljsjs is less relevant in recent years, and hammer.js ought to be approached differently? Am I wrong there?)
This article unrelated to clojure illustrates the general issues, stemming from the development overhead when touchscreens condense the different mouse events to one action. And in the past, some clojure devs discussed implementing dnd here.
- Has anyone here been there and done that? Come up with their own solutions or used another tool?
- Are there one-stop libraries I’ve missed?
- Are paper.js or hammer.js worth bringing into this simpler context?
- If anyone has their own projects of this sort, I’d love to see them or know more.
These are good leads, but even at a minor production scale, I don’t want to waste time trying to flesh out a partial fit or work with outdated tools. My js is also generally poor, so the goal is to write as much as I can in clojure.