Picknplace.js

Languages and libraries

javascript ui interaction library

SHOW HN2025

455points
152comments
#89of 3,837 in 2025
Top 3%of 2025 by points

How HN took it

MixedNo clear lean

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 HN
    • It’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
    • 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 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 HN
    • It’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 HN
    • On 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 HN
    • It'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 HN
    • I 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 HN
    • The 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 HN
    • With my mouse gear scroll is impossible to select the desired position. It jump always 2 steps.
      fbn79 on HN
    • One 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 HN
    • The “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 HN
    • 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 HN
    • That'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 HN
    • Sharing 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 HN
    • 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
    • Yes 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 HN
    • It’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 HN
    • How 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 HN
    • This 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 HN
    • Given 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

Category, keywords, summaries and labels on this page were made by AI (Thread Reader v2) and not checked by hand. Each point links to the comments it came from.

Add a badge to your READMEShown on HackerShow
[![Shown on HackerShow](https://hackershow.org/badge.svg)](https://hackershow.org/show/46290349)