Picknplace.js
Languages and libraries
javascript ui interaction library
SHOW HN2025
How HN took it
27 positive, 32 neutral or asking, 24 mixed, 39 critical, out of 122 comments about the project. Thread score -0.13.
Design: 12 for, 16 againstIdea: 12 for, 7 againstExecution: 0 for, 15 againstDocs: 0 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Original idea that is easier on mobile than drag and drop.
From 3 comments
wow! I love this solution. I agree on the pain of drag and drop on mobile.
breadchris on HNIt’s been a long time since I’ve said “woah” out loud to something that wasn’t a science video. This is much better on mobile and I suspect for accessibility.
hinkley on HNHey @bbx, Appreciate the different approach to this user experience. I can certainly see it being a more user friendly way where pick and place and explicit actions, versus an…
Parmacoy on HN
Good experiment that helps accessibility.
From 2 comments
Hey @bbx, Appreciate the different approach to this user experience. I can certainly see it being a more user friendly way where pick and place and explicit actions, versus an…
Parmacoy on HNIt’s been a long time since I’ve said “woah” out loud to something that wasn’t a science video. This is much better on mobile and I suspect for accessibility.
hinkley on HN
Objections
Page or list scrolling while picked is disorienting and confusing.
From 3 comments
On mobile this is a strong contender for the worst UX I've ever seen. The whole page moves, so you have to continously scroll back up after placing something. If when in pick…
bramhaag on HNOn mobile I wish there were a way to lock the browser window from scrolling. It was really disorienting with both the window and the list item moving.
jahsome on HNIt's interesting and you should keep iterating. My critiques: it requires a scroll container with sufficient margin to move the top and bottom elements (or I guess left and…
elgertam on HN
Picked state and place controls are unclear; users get stuck.
From 3 comments
Love it but no one would understand this. I bet most people would just be "stuck" in the "picked" state and not know how to exit it, with an item covering the screen. Something…
halapro on HNI really don’t like this. It took me several attempts to figure out what was going on. And even after I had finally figured it out, it still felt more like a rendering glitch…
hnlmorg on HNThe amount of time it took me to figure out how to use this I am embarrassed to say was too long.
stevenhubertron on HN
Breaks with indexed scroll wheels, which jump several items at once.
From 3 comments
Does not work with an indexed scrollwheel -- one click of the scroll wheel moves like 4 lines in your list, which seems to break the assumptions of your code. I get very strange…
topaz0 on HNWith my mouse gear scroll is impossible to select the desired position. It jump always 2 steps.
fbn79 on HNOne HUGE problem, what if you set you wheel to scroll faster in the browser? Currently your example scroll always 3 items, i can't move only 1 down or up.
progx on HN
Place button is far from the picked item.
From 2 comments
This reminds me of a UI pattern I saw in an old iOS comic reader (Comic Zeal) for organizing your comics. You had a horizontal rule that worked as a cursor. You could swipe…
yojo on HNThe “place” aspect of the process needs some refinement. On iOS, it triggers the page bump (and necessitates and extra click) because it’s aligned at the bottom of the page.…
mwillis on HN
Requests
Show drop-position highlights between items.
From 3 comments
i was expecting when i click pick, that a "place" button would appear on each other item, or i could click on a row OR possibly highlighting the spots between rows either with a…
css_apologist on HNI did not like this as is and found it confusing, but think it has potential and with a few adjustments could be great. I am sure you might have been planning them, and so…
digitaltrees on HNThat's a great idea actually. I'd have to find a way to highlight the possible landing spots.
bbx on HN
Make the picked item clearly highlighted, with a border or shadow.
From 2 comments
Brilliant! Its been a while since I've seen a brand new UX patten. As some others have mentioned, the picked state needs to be a bit more clear. Some suggestions - 1. As a border…
thunderbong on HNSharing some feedback and some broader context. I think it's said in other words elsewhere but the "picked" state needs to be clearer that it's picked up. What may be helpful is…
cyrusradfar on HN
Let only the list scroll, not the whole page.
From 3 comments
Neat concept, but why scroll the entire page? It just ends up being distracting and confusing. Once you hit "pick" the scroll action should affect just the list and nothing else.
paxys on HNThis is awesome. I wonder how it would feel if just the selections scrolled, like Apple’s interface for setting alarms and timers. I especially love it because it leaves open the…
stephenlf on HNYes I think on mobile, having only the list scroll would be great. I actually had the Apple alarm interface in mind for a bit but thought implementing it would be more difficult.…
bbx on HN
Allow long press or clicking the item itself to pick.
From 2 comments
I did not like this as is and found it confusing, but think it has potential and with a few adjustments could be great. I am sure you might have been planning them, and so…
digitaltrees on HNIt’s good, I like it. I think that it might become easier to use if: - The whole item is clickable for the pick - Picked state is indicated clearly, possibly by hovering the item…
untech on HN
Questions
How do items near the top or bottom move when the list cannot scroll far enough?
From 2 comments
Great work building something and having the courage to show HN ;-) Interesting design. Even though I read the instructions still could not get it to work for 30 or so seconds.…
Sn0wCoder on HNHow move an item from the top to the bottom? Do you need to add 100% padding to the top and bottom of every list? Most lists can't be scrolled far enough to get the screen…
recursive on HN
Alternatives named
Drag and drop, including mrcoles dragondrop demo.
From 2 comments
But how are you going to replace the OG? https://mrcoles.com/dragondrop/ (Ironically doesn’t work on mobile)
jon_richards on HNThis has the effect that you’re shifting the list rather than the item. And yet your actual controls are anchored to the item. On a touch device, to shift an item from the middle…
chrismorgan on HN
Move buttons with drop-here targets between items.
From 2 comments
When I had to implement a UI for reordering a list, I just had a “move” button on each item, and when you press it “move here” buttons would appear between every item (and at the…
Timwi on HNGiven I need to read the instructions to understand how to use this, It's a no go for me. I clicked it and I thought there was a bug because I could only place on the element I…
bangaladore on HN
Apple alarm-style scroll picker.
From 1 comment
This is awesome. I wonder how it would feel if just the selections scrolled, like Apple’s interface for setting alarms and timers. I especially love it because it leaves open the…
stephenlf on HN