Show HN: Picknplace.js, an alternative to drag-and-drop

This is very cool! I would still call this a 3-step approach, since you are performing 3 actions, but nonetheless, this UX interaction could be quite an improvement in some cases.

Why "click, scroll and drop", rather than "click, point and drop"? The latter seems more general, works in 2D, and doesn't require two-finger mouse scrolling.

Very interesting! A little awkward on mobile , but that’s might be me not being used to it

I'm unable to scroll to an exact spot, it often scrolls past two elements at once.

Interesting concept but kind of unintuitive to figure out without reading about it first. Maybe you can tweak it?

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.

I repeatedly clicked pick and place and scratched my head for a minute. Wish there were a cue that I have to scroll.

Very cool concept. Several people have made good suggestions on improving the UX. If I were implementing I’d probably try to support a stack of picked items so I could grab several and move them all at once.

This is fantastic. It didn’t work for me at first bc i dragged assuming it was dnd, but then would say that is “user error”

This doesn’t appear to always work? Sometimes the placed item gets sent back to the original position even though it’s clearly being placed in a new spot (at least from what I can see visually). The UX idea is nice.

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.

Ideas for usability: -Add a background behind the buttons when you have picked. -When having picked, display above the buttons a helper text like "Now scroll to change position".

Really nice, I found it highly intuitive on first use. Only thing I might suggest is making it more obvious what the "handle" button is that initiates the pick.

https://github.com/jgthms/picknplace.js/

Linked in page is 404.

Oh, lovely. Let's play with this problem. Variations to consider:

- Zoom out after drag start and back in when hovering over items.

- Drag to a staging area/clipboard.

I instinctively tried to tap on the object again to place it, and I think that should be the default.

The keyboard arrows to move works nice, but pressing enter to place appears to cancel it. I'm on firefox 145/mac os 15.6.1 if that matters.

you should perhaps mention that this is about dragging and dropping objects in lists. otherwise there is an additional level of jarring-ness due to not even knowing what problem you're trying to solve (and then bewildered by what it does as a result).

I do not like this. I am still glad you shared it!

how does it work with more complex layout not just vertical list of items, like those drag-and-drop for visualization UI: https://github.com/Kanaries/graphic-walker

you can see that there are different areas of draggable and droppable, on different directions.

For mobile, this seems like a good, maybe even better solution than the status Quo. Maybe not so much for desktop.

Doesnt work, place just reverts on mobile safari. Even if it worked this adds steps.

Viewing this on my phone and tapping the colored does nothing at all. Are they supposed to do something?

I hate it, but I love experimentation, and I love seeing new UI/UX concepts. It's so hard to come up with something original. I'd never want to dissuade someone from trying something out.

Ditch the scroll.

Pick: all previous "Pick" buttons become "Place". You choose one.

Done. Simple, explicit, intuitive.

this is nice enough using windows pen with wacom. better that traditional in my usage

Honestly when I see things like this, I feel Ai can steal our coding but it can NEVER still our resoning and creativity. Thanks for sharing!

Doesn't work on my phone or I just didn't get it at all.

Unresponsive in chrome, even in incognito.

Regardless of the technical and UX merit of this project.

There are clearly a bunch of people who haven't used a new interface in perhapse years and are simply obtuse.

It took me less than 5 seconds to start using this one handed while I was pissing at a urinal, I mean that quite literally.

I don’t love it but really cool as something to test a new way.

Placing doesn’t work on an iPhone. Tapping the element after I have scrolled doesn’t work and there is no UI that tells me how to place.

Update: there is some UI hidden inside the page text that includes a button to place. Add a background to this area and people will be able to see it. Or let me tap the element.

Took me about a minute to figure out how it works.

Interesting.

Definitely see its potential for mobile pages.

On web it feels unintuitive to scroll. It feels more natural to drag and drop. Guess Trello boards have conditioned us.

But on web this control is way better.

is the whole page supposed to scroll when you scroll after picking?

a bit confusing, but lovely original idea, well made demo too

thanks for sharing

Do like

Cool idea. Imo, Place should take Pick’s slot instead of being outside. There s probably something I didn’t think if that orevents this…

Not trying to diminish the work at all because it works well but I hate this UX pattern. There is likely a reason this hasn't been done. If it wasn't for the pick -> scroll -> place instruction I would have no idea how to use it.

Great, maybe highlight the item so we can distinguish the picked item from the others without scrolling.

I completely got the point of it, however, I wanted to do something that was easy with this and not so easy with traditional drag and drop, which is move an object down several screenfuls. If it had 50 items rather than 10 I think it would be better for both those who easily see the advantage of this method and those who don't.

Doesn't do anything in Edge?

[dead]

[dead]

[dead]