Show HN: Picknplace.js, an alternative to drag-and-drop
43 comments
·December 16, 2025jotaen
This looks like an interesting concept!
> I find that the drag and drop experience can quickly become a nightmare, especially on mobile.
To me, drag and drop is only a nightmare on mobile. On desktop (using a mouse or trackpad), drag and drop actually works quite well.
Your design experiment reminds me of a recent talk of Scott Jenson, where he talked about how we just took over established UX patterns from desktop to mobile as is, and how that created all sorts of nuisances. (https://youtu.be/1fZTOjd_bOQ?t=1565)
If mobile drag&drop was implemented like you are suggesting from the very start, I actually might have preferred that over the situation we now ended up with.
One technical note on your implementation: on certain mobile browsers, there is a glitch where the UI can jump around as the browser dynamically slides top or bottom menu bars in and out.
lylejantzi3rd
It's interesting. I was expecting the bar to follow the cursor as you move it and clicking a second time would place it wherever it was.
But, that's on desktop. The scrolling works a lot better on mobile.
topaz0
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 behaviors, e.g. "pick" Five, scroll up and down, see swapping of Ten and Six during scroll. Then "place" results in Five being in the same place as before but Nine and Ten are swapped. Similar when using arrow keys.
hinkley
These feel like fixable things.
kej
I could see this being really useful for editing lists that are longer than the page. The example that immediately comes to mind is reordering a playlist on YouTube Music, which currently requires dragging to near the screen edge and trying to convince the list to scroll while you still hold on to the item you're trying to move.
codeptualize
That's neat. Not sure if I would deploy it, as it will be hard to explain/teach people how to use it (as I see in other comments already), but I do see the value in it.
It solves the "drag and drop beyond what fits the screen" much better than you can with drag and drop, the awkward auto-scroll-on-nearing-the-edge-thing.
I would say, if you need to reorder many items, it gets a bit disorienting, the whole list moves as it's anchored to the item you are moving. Maybe there is a way to combine drag and drop where this kicks in if you go beyond the bounds of the visible area.
Also don't think this can work well with multiple axis/drop zones.
hinkley
I wonder if a stack metaphor would work for that. So that N items are no bigger than 2 items.
bramhaag
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 mode you would only scroll the list, I would be able to organize it much faster.
anonymous908213
It's even worse on desktop. You have to scroll the entire screen (with mousewheel or arrow keys) to move the selection. I spent 30 seconds thinking it was bugged because the intuitive solution would be to click once, then simply click where you want to place it, but the "place" button only showed up on the one you already "picked". Fine idea, worst conceivable execution of UX I have ever seen.
chipheat
Perhaps a combination of the two? Maybe standard drag-and-drop works as usual, but if you drag the item to some deadzone (like the side of the screen?), it will stick and you're free to scroll to where you want to put it.
Bolwin
Scroll up to what? The whole list fits on screen for me
css_apologist
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 line, or "place"
i think that's a much more intuitive & reliable ui, and would be an improvement on drag n drop. or a supplement to it
bbx
That's a great idea actually. I'd have to find a way to highlight the possible landing spots.
css_apologist
(i do like innovating on this btw)
here's a basic CSS starting point
:has(.pnp-picked) .pnp-item:not(.pnp-picked):not(:last-child)::after {
content: "[place]";
}dzogchen
Took me about a minute to figure out how it works.
jmisavage
Interesting concept. Not sure if I like it more than drag and drop though, but I do love explorations like this. Reminds me of the old days when Flash devs would build some truly crazy stuff.
Potential bug: The first time I tried it on my iPad, it didn’t place the item, but it did on subsequent uses.
paxys
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.
bangaladore
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 clicked.
hinkley
I just tried it? And it did something that seemed weird but reasonable.
mentalgear
For mobile, this seems like a good, maybe even better solution than the status Quo. Maybe not so much for desktop.
I find that the drag and drop experience can quickly become a nightmare, especially on mobile. To tap, hold, drag, and scroll, all at the same time, is both difficult to achieve, and prone to errors. I've always had in mind this 2-step approach, where picking an element and placing it were two separate steps. So I implemented this basic version to showcase my idea.
While it might take more time than a regular drag and drop, the benefit is for people who struggle with holding down the mouse button. With picknplace.js, you only need two clicks and some scrolling.
This solution is meant as an experiment, so I'm open to discussion.