7 ms·

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

455 points by bbx 9mo ago

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.

qingcharles 9mo ago
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.
feep 9mo ago
https://github.com/jgthms/picknplace.js/ https://github.com/jgthms/picknplace.js/ Linked in page is 404.
- gabrielsroka 9mo ago
  Your link is 404 (is that what you meant?) Their page uses https://jgthms.com/picknplace.js/picknplace.js https://jgthms.com/picknplace.js/picknplace.js
- bbx 9mo ago
  Sorry, it's public now.
mrozbarry 9mo ago
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.
bramhaag 9mo ago
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.
- Bolwin 9mo ago
  Scroll up to what? The whole list fits on screen for me
- anonymous908213 9mo ago
  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 9mo ago
  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.
- whiterook6 9mo ago
  Surely you're being hyperbolic. I've seen some atrocious UX before. Maybe what you mean is it's a good idea but the scrolling part should be list-based instead of page-based.
  - polalavik 9mo ago
    No because what if the list is half cut off by the page but you want to go to the bottom? If it doesn’t scroll the page it’s even worse. If it does scroll the page it’s not great. It’s just bad design. Also not intuitive. I didn’t read the directions and it took me a couple seconds to get what was going on.
- 9mo ago
bangaladore 9mo ago
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 9mo ago
  I just tried it? And it did something that seemed weird but reasonable.
fellowniusmonk 9mo ago
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.
- nkrisc 9mo ago
  Yes, the users must be wrong.
breadchris 9mo ago
wow! I love this solution. I agree on the pain of drag and drop on mobile.
loa_observer 9mo ago
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 https://github.com/Kanaries/graphic-walker you can see that there are different areas of draggable and droppable, on different directions.
jotaen 9mo ago
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 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.
- killerstorm 9mo ago
  > On desktop (using a mouse or trackpad), drag and drop actually works quite well. Strong disagree here. It is intuitive, it is easy to demonstrate. But it's not really convenient, especially on a trackpad. I have enough mouse agility to play RTS games but not to do a reliable drag-and-drop, especially in a complicated case - across windows, with scroll, etc.
  - jrowen 9mo ago
    Yes, it can get tricky if you have to scroll a bunch, e.g. moving a file in a big directory into a subfolder, trying to hit that one pixel where it will scroll up, or using two other fingers to attempt to scroll, while holding the drag finger down...(CLI pros, you win this one). I would like a desktop pick and place that works like drag and drop, you click and then it sticks to the cursor, but you are free to do whatever gestures until you click again.
    - sunrunner 9mo ago
      > while holding the drag finger down I'm not sure if this is common on other desktop operating systems but the 'Drag Lock' feature on macOS allows you to double-tap an item, then drag it without holding the button down to begin a drag. At that point lifting your finger continues the drag until you tap once to release it. I would be amazed at how many people using macOS have never found this option except I'm not sure I've ever seen it being called out as a feature, and nowadays it's also buried deep under Accessibility settings (the irony) instead of just being a Trackpad option, so a lot of users might not even think to go there.
ndgold 9mo ago
I do not like this. I am still glad you shared it!
aitchnyu 9mo ago
I repeatedly clicked pick and place and scratched my head for a minute. Wish there were a cue that I have to scroll.
nvader 9mo ago
I instinctively tried to tap on the object again to place it, and I think that should be the default.
deleted 9mo ago
[deleted]
nkrisc 9mo ago
Viewing this on my phone and tapping the colored does nothing at all. Are they supposed to do something?
codeptualize 9mo ago
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 9mo ago
  I wonder if a stack metaphor would work for that. So that N items are no bigger than 2 items.
css_apologist 9mo ago
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 9mo ago
  That's a great idea actually. I'd have to find a way to highlight the possible landing spots.
  - css_apologist 9mo ago
    (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]"; }
- iamwil 9mo ago
  I was expecting that the line item would move with my mouse movement, not with my scroll.
topaz0 9mo ago
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 9mo ago
  These feel like fixable things.
  - topaz0 9mo ago
    The ones that are moving the wrong item to the wrong place are fixable, but there will always be a problem when scrolling is quantized if there is a possibility that any item in the list is shorter than the scroll quantum.
    - awinter-py 9mo ago
      dom scroll event interceptor maybe?
  - webstrand 9mo ago
    Somewhat shockingly, apparently DOM does not give access to the raw scrollwheel data.
- ljouhet 9mo ago
  I have a regular scroll wheel and it moves two items each time. Totally unusable for me. (great idea, though)
sgt 9mo ago
Interesting concept but kind of unintuitive to figure out without reading about it first. Maybe you can tweak it?
hysan 9mo ago
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.
victorbjorklund 9mo ago
I don’t love it but really cool as something to test a new way.
racl101 9mo ago
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.
paxys 9mo ago
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.
euph0ria 9mo ago
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".
- woodpanel 9mo ago
  Came here to write the same. Give it some visual state of “pickedness“ (e.g. by displaying this state as elevated). But in any case, great stuff!
- hinkley 9mo ago
  CSS outline would be a good visual indicator here as it won’t modify the page layout.
mattacular 9mo ago
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.
hinkley 9mo ago
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.
flowerthoughts 9mo ago
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.
kej 9mo ago
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.
- hmokiguess 9mo ago
  Yessss this exactly! Moving songs up/down in large playlists would be fun with this concept. I wish that was a thing for music apps.
hoppp 9mo ago
Doesn't work on my phone or I just didn't get it at all.
jmisavage 9mo ago
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.
mentalgear 9mo ago
For mobile, this seems like a good, maybe even better solution than the status Quo. Maybe not so much for desktop.
dzogchen 9mo ago
Took me about a minute to figure out how it works.
lylejantzi3rd 9mo ago
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.
stevenhubertron 9mo ago
The amount of time it took me to figure out how to use this I am embarrassed to say was too long.
- nkmnz 9mo ago
  Yeah me too. It was only on third try that I realized I shouldn't move the cursor but just scroll :D
untech 9mo ago
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 - You click on the item itself to place, or possibly anywhere on the screen
- cosmic_cheese 9mo ago
  Came to say that it badly needs better state communication. What I’d do is to add a drop shadow and increase scale by 1-3%, with a clean, snappy animation between placed and picked up. I might also add a “gripping hand” graphic with a cursor-like appearance to picked up items and show a “scroll to move” instruction next to the hand graphic if the user hasn’t done anything for a couple of seconds.
recursive 9mo ago
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 coordinates of the top to the bottom.
- leptons 9mo ago
  It seems like it only works on pages that scroll, which is not good. I deleted the <header> and <footer> elements on the page, and was unable to anything but "cancel" after clicking "pick". Also did not work setting max-height on the <main> element and overflow-y:scroll, even though I could scroll the items did not scroll with it. It is an experiment and probably doesn't have every implementation detail covered yet.
agumonkey 9mo ago
a bit confusing, but lovely original idea, well made demo too thanks for sharing
ickelbawd 9mo ago
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.
wnevets 9mo ago
is the whole page supposed to scroll when you scroll after picking?
gaigalas 9mo ago
Ditch the scroll. Pick: all previous "Pick" buttons become "Place". You choose one. Done. Simple, explicit, intuitive.
will_walker 9mo ago
As a ux designer, I like this, especially as it solves the problem of dragging mobile elements below the fold or off the visible screen view. One suggestion I'd love to try out- let the user select multiple elements at once, and reorder the selected elements in the hovering state using conventional drag and drop mechanics. This might add complexity or might be a much more convenient way to deal with lists! Or, dragging the element selected should allow a user to manually ‘place’ the item on screen. I wouldn’t use this on desktop, though! Mice typically allow you to scroll and drag pretty easily.
killerstorm 9mo ago
Nice. I actually did something similar 25 years ago, I called by think "pick-and-put". At that time I switched from MS-DOS environment to Windows 98. And as I was trying new UI features, I found drag-and-drop incredibly annoying. Especially if you do it between different windows, it requires a lot of movements, etc. I had an idea that going further into skeuomorphism can make things better, so I started experimenting with 3D UI, particularly, a file manager with 3D UI. And as an alternative to drag-and-drop I designed pick-and-put. It's actually very simple: right mouse button picks up an object and you get a symbol of that object next to the cursor. Then a click onto empty space puts it there. Or you can click a copy button which would copy it, etc. I think it could work really well if we got a convention that some mouse button always picks an object. But we don't. I don't think there's a way to make it works in the same way on desktop and mobile in a way which would be good. On desktop you have a mouse pointer, and you can easily represent point of insertion. For mobile you came up with this scroll trick, but I think many people would find it unintuitive and annoying - especially on desktop.
csmantle 9mo ago
This actually caused a constant switching of attention on mobile. Each time an element is picked up I'll have to look at the bottom toolbar, then the floating element in the center, then back to the bottom to place it, so on and so forth. And the list in the demo is not that long yet. ------ Will this work on lists that sre short? It seems that it relies on overflow to move the element
Sn0wCoder 9mo ago
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. Might want to show some text 'Now Scroll' with up/down arrows to the left or right of the list. Seems ok when the list is in the middle of the page and you already have room to scroll up and down, but how is it going to work when the list is at the top or bottom of the page? Or when the page is so short it does not scroll at all? I suppose you could have the container scroll but then it needs to be considerable larger than the list. Honestly when you click 'Pick' all of the others should say 'Place' would be more intuitive and give the user options to support both. As they use it they will pick up they can scroll if they want.
Timwi 9mo ago
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 top and bottom). These buttons are positioned absolutely, so there is no reflow from stretching the list. The location where you ‘place’ the item is where you click, not dependent on scroll position. Without even planning for use on mobile it ended up “just working” on mobile because you only need to tap buttons.
jahsome 9mo ago
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.
- msla 9mo ago
  What a useless piece of snark.
lloydatkinson 9mo ago
Doesn't do anything in Edge?
ajkjk 9mo ago
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).
joshribakoff 9mo ago
Doesnt work, place just reverts on mobile safari. Even if it worked this adds steps.
hmokiguess 9mo ago
I think you could play with sticky footers, sticky headers, and some active styling indicators like opacity and background plus highlights to let the user know they are in scroll mode. Really fun idea, love this! Wish Apple Music UI for moving songs on playlists had that. Holding my dumb while dragging is suboptimal comparing to click and scroll.
CGamesPlay 9mo ago
OK, so I get that you're trying an alternative on the metaphor that drag and drop uses. The metaphor is "pick up the item, move it, then drop it", but the implementation doesn't work well on mobile, so you made it modal. But for me scrolling feels like "pick up the item, move the rest of the world so the item above the target, then drop it". It feels very strange. As an refinement, I would keep the modality but add back in the dragging paradigm. Use a typical "move item" scrubber control, but have that control switch the item to a floating modality, and give it "send back" and "drop here" buttons. The user can drag the item, scroll, interact with the page, and the item stays with them to get where they want to go. Here is a crude mockup: https://excalidraw.com/#json=9DwYqkWRhdEgEEqyzY7X8,fCdPzIzTmzKoSBpcF89yFw https://excalidraw.com/#json=9DwYqkWRhdEgEEqyzY7X8,fCdPzIzTm...
thunderbong 9mo ago
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 around 'Pick' to indicate it as an action 2. Once an item is picked, add a mask on the whole page, with only the picked item in front of the mask. (This is going to be a bit challenging, I'm guessing, to show the gaps between the items as you scroll) 3. Once an item is picked, the 'Cancel' and 'Place' bar should have a background. Sometimes this overlaps the list and is not clearly visible. 4. It should not be possible to scroll way above or below the list. 5. On 'Cancel' scroll back to the item. Again, congratulations! It's one thing to think of something, quite another to be able to implement it nicely.
- uxamanda 9mo ago
  Yes! This is very cool. Should be somewhat “locked” into the right area of scroll and picked item should have some height above the others.
- savolai 9mo ago
  +1 inspiring and relevant to a project i am working on. I would suggest having the place button next to/in the item being dragged like Pick. When learning to use this, having it at a distance creates unnecessary cognitive burden. Also, I would probably make the entire item clickable for pick, if there didn’t have to be a click target on the item for other functionality.
- rendaw 9mo ago
  I also hate drag and drop. It'd be good if when you picked something it automatically added the border too - otherwise I think this won't work on short pages? I have some hesitations though - relying on scroll as the positioning method means that if you don't have a fine-grained scroll method e.g. on desktop, if you have a non-continuous wheel, you'll need to rely on "drag and dropping" the scroll bar, which doesn't really improve things (and has its own issues if your page is very long). I think I'd prefer something other than scroll-to-position. Like what about making gaps between items with a "drop" button? Or adding up/down arrow buttons to the "picked" element so that fine grained adjustments could be done?
alexjray 9mo ago
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.
wild_pointer 9mo ago
9/10 for originality. 2/10 for usefulness. Not bashing, that's how good ideas are found. But not this time IMO :)
- m3sta 9mo ago
  I disagree.
  - wild_pointer 9mo ago
    OK.
deskman 9mo ago
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!
- cindyllm 9mo ago
  [dead]
yojo 9mo ago
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 things to the side (“pick”) to add them to the cursor. You then moved the cursor to the desired location and tapped it to dump the contents (“place”). My biggest problem with the OP implementation is the “place” button can be far from the “pick” button. Why not just leave it on the moving element - change the label from “pick” to “place” and call it a day.
stephenlf 9mo ago
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 possibility of interacting with the rest of the screen while an element is picked. Eg you could navigate a directory tree while finding the right place to put a file. Though I guess it’s similar to cut/paste in that respect.
- bbx 9mo ago
  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. But you're right, it's probably a better experience.
fitsumbelay 9mo ago
I'm old enough to remember when using a mouse felt like being unchained. I also remember how quickly dragging began to feel like a time waste, even more so after spending more time on CLIs than GUIs. So though this seems limited to vertically arranged DOM things it's very cool for eliminating the least productive/most frustrating stage of drag-drop interactions Would love to see this work with keyboard only
jon_richards 9mo ago
But how are you going to replace the OG? https://mrcoles.com/dragondrop/ https://mrcoles.com/dragondrop/ (Ironically doesn’t work on mobile)
- kaizenb 9mo ago
  sounds effects on! piuww piuwww! waaaaa I'm going to eat youuu!
- rasso 9mo ago
  Amazing, thanks! Didn't know this one yet :)
popalchemist 9mo ago
Unresponsive in chrome, even in incognito.
mwillis 9mo ago
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. Having the “place” action hover near the selected object could be an alternative. I really enjoy this pattern. Nice work.
- chanux 9mo ago
  cancel place should have some kind of a separator between them. I thought it is to cancel placing instead of two options to cancel or place.
benatkin 9mo ago
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.
nurettin 9mo ago
Great, maybe highlight the item so we can distinguish the picked item from the others without scrolling.
jkrubin 9mo ago
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”
dash2 9mo ago
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.
bryanhogan 9mo ago
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.
Mikhail_Edoshin 9mo ago
Apple Newton had a way to drag/copy things around, a visual clipboard of sorts. They used a stilus, so it's similar. You drag an object to a side of the screen, where it turns into a visible but small handle and stucks. I think it could stay there any time and you could have several objects arranged this way. Then you can go anyplace, including a different application. Once you're in the right place, you could drag an object back and put it where you wanted to put it.
- pwdisswordfishy 9mo ago
  Apple Newton had smell-o-vision? It was really ahead of its time.
  - Mikhail_Edoshin 9mo ago
    Did I write that? Oh, right. Fixed. Thanks!
digitaltrees 9mo ago
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 congratulations on getting something out for comment rather than over building. 1. It will be more intuitive if you can long press or click on the item rather than have to click the "pick" link. That behavior is too deeply ingrained from drag and drop at this point. 2. It would help to show place locations where it will be inserted between objects. I found myself instinctively scrolling up and down to line it up perfectly because it just didnt feel likely to succeed if it wasnt properly placed in the middle, and the absence of visual cues make it seem like I needed to me more accurate with my placement. Overall cool concept and good work. Keep it up.
hnlmorg 9mo ago
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 than good UX. If I struggled then I really can’t see this working for non-technical folk. Worse yet, because people wouldn’t expect this behaviour coupled with the fact that scrolling shouldn’t have any changes to the website state, you’ll likely see people constantly making accidental changes to the ordering of the list.
px1999 9mo ago
This is really nice and a very original take. It feels good on mobile / other touch devices. I'd love to see it feel a bit more polished on desktop (maybe I'll give that a shot if I find a bit of spare time!) - I could see a few simple things like adding up/down arrows to the picked item and wiring into up and down arrow presses going a long way to making it work really well there too. Genuinely, thank you for sharing this, it's something different and interesting.
d--b 9mo ago
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…
anigbrowl 9mo ago
Do like
chrismorgan 9mo ago
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 of a list to the top: • With traditional drag-and-drop: press in the middle (long press or regular press on a movement grabby), drag upwards, release. • With this: tap in the middle, on the item, then press anywhere, drag down, release. It’s uncomfortable. The logical entity you’re manipulating is the item, but you’re having to do it by interacting with the list, and if your drag starts on the item it’ll achieve the opposite of what you want. It may also interact a little poorly with retracting browser chrome, which is very common on mobile. I’d definitely say it does on Firefox for Android with top address bar. As for other platforms… ouch. With a precise touchpad it’s bizarre and uncomfortable but functional (though the scroll direction thing will probably hit even harder and be even more frustrating); with a mouse with indexed scrolling it’s fairly fundamentally unusable. All up, although it’s an interesting direction to explore, I don’t like it at all at present, and doubt the scrolling aspect can be salvaged. Direct manipulation is good.
- gurghet 9mo ago
  I agree, this doesn't make sense. Also how can you place the item when there is no space to put it? If you want to mimic reality you should: 1) drag and drop outside of the list the item you want to move putsode the list 2) drag and drop the item in the place you want to put your selection 3) place your pick in the empty space 4) quietly discard the item you dislodged 5) wait for people to point out you are now missing one item 6) drag and drop the person under the carpet 7) repeat until no criticism
cmos32 9mo ago
[dead]
polyterative 9mo ago
this is nice enough using windows pen with wacom. better that traditional in my usage
theF00l 9mo ago
Awesome! How do you think this compares to the pattern in iOS (and I think Android) where you hold an app icon and the rest start jiggling and then you can tap a folder to move it there (or also drag it). They feel quite similar but am no UX expert.
fbn79 9mo ago
With my mouse gear scroll is impossible to select the desired position. It jump always 2 steps.
- seqizz 9mo ago
  Yeah and not many people are complaining about this. Feels like almost everyone has smooth scrolling by default.
Parmacoy 9mo ago
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 accidental finger release on touch devices for example. I think this has potential for accessibility, just at the moment your demo page has issues in certain cases. (Different behaviour experienced on iOS 26.2 Safari vs commonly used WebView containers and/or websites masquerading as apps. If you test the following (edge) cases in a webview. 1. Pick item One, try and move it down. You will find item Two goes along for the ride, and when you drop it, item One stays at the top and item Two is dropped instead. 2. No matter what I tried in the webview, I was unable to purposefully move an item to First or Last position. Weirdly this doesn’t occur for me in dedicated safari. I have looked at drag and drop libraries for use on mobile and feel your approach has the potential to be more intuitive, especially for the use cases I have. Thanks for sharing a new approach.
amadeuspagel 9mo ago
I'm unable to scroll to an exact spot, it often scrolls past two elements at once.
progx 9mo ago
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.
- Zealotux 9mo ago
  I would argue this is a mobile-centric solution, for desktop you could still have the classic drag-and-drop, actually both can coexist.
busfahrer 9mo ago
Slightly off-topic, but I'd love for someone to invent mouse hover that works on mobile, without any hardware support like detecting finger hovering or the likes. Any ideas?
qwertytyyuu 9mo ago
Very interesting! A little awkward on mobile , but that’s might be me not being used to it
grimgrin 9mo ago
only slightly similar, on desktop when making a visual selection, dragging cursor from x,y to another x,y then releasing? i'll run into problems with early releases sometimes, could be hardware, network, whatever if the tool i'm using has this option, i will use it and love it: -D, --nodrag Allows you to click twice to indicate a selection, rather than click-dragging. that's from maim, idk what else does it, but i prefer "nodrag" to "drag-and-drop" or "drag-and-release" picknplace reminded me of it
nailer 9mo ago
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.
oakwhiz 9mo ago
To me the problem with drag and drop is not only that it has to be a single continuous motion, but that nothing else interrupts you at an inconvenient time while you are doing it. The consequences of an incorrect drag and drop can be confusing. This "pick and place" UI is more precise and less error prone but a lot less convenient. Maybe there is a middle ground.
ericskiff 9mo ago
Awesome to see real UX experimentation, and this elicited a strong response from me at first "oh I haaaaate that". On further reflection, this is very interesting and I understand where the drag and drop interaction breaks down on long lists. Some additional UI affordances to communicate what's happening may make it intuitive and clear. Things I'd want to experiment with if I was implementing this: * A "wheel" effect where the items in the list grow slightly as they near the chosen item which stays locked in the interface at the center, popping into place at at each 'click'. Somewhat like the Price Is Right wheel flipper * Making the interaction entirely scroll based once I click. Setting the item in place can be done by any other click or keypress, and cancelled with the escape hotkey. My interaction is pick, scroll, click (without having to aim back at the thing I just placed by scrolling)
halapro 9mo ago
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 similar but less obtrusive would be to show "drop here" buttons after you "pick" an item. No sticky element on screen, clear followup action that doesn't require exact scrolling position.
heroku 9mo ago
[dead]
elgertam 9mo ago
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 right) past center; the "place" button is quite unintuitive and should be placed nearer to the pick-n-place container, or even on the selected element itself; and the position of the selected element isn't quite right, though this seems more like a bug. Keep iterating! Drag-n-drop is good on desktop, but I disprefer it for mobile.
XCSme 9mo ago
Awesome! Is it actually working well? Not really, at least not at this stage. But it's cool to see a new UX idea.
cyrusradfar 9mo ago
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 to actually add a drop shadow/scale/border and ideally there should be a hole where it was that makes it clear that you are holding it. Not trying to diminish, but this pattern has other uses already. Anyone who builds accessibly for folks who use keyboard and no mouse. Tab/arrows to highlight, Enter to select, Arrows to move, Enter to drop.
toobulkeh 9mo ago
What if picking took the item out to the side in a specific place. Like a little basket or drawer
huflungdung 9mo ago
[dead]
layer8 9mo ago
That’s how “Choose on map” works on Google Maps on touch devices.
callumgare 9mo ago
Very cool! If you’re looking for an example of this UI to compare how others have implemented it take a look at the move function in the mobile app for https://anytype.io https://anytype.io I’ve recorded an example of it in use: https://youtube.com/shorts/T3_8HIbHlls https://youtube.com/shorts/T3_8HIbHlls
fitsumbelay 9mo ago
Made this week's Javascript Weekly https://javascriptweekly.com/issues/766 https://javascriptweekly.com/issues/766
ebiester 9mo ago
For a UX pattern, I will often need to move multiple items at the same time. I'd like an exploration that allows the equivalent of shift-click and command-click for multi-select. And if they're not consecutive, they should be grouped. Otherwise, it's going to be a very frustrating experience to move a number of things.
robocat 9mo ago
@bbox FYI: I noticed a bug on iPhone SE running 26.2 with tabs set to "bottom" in settings. Scroll so that 10 is near bottom of screen. Pick 10, then scroll up a bit. The bottom 10 element then gets lost and you can't see it. I suspect because Safari expands the size of its controls at the bottom. The cancel + place buttons stay sticky to the bottom of the screen correctly, so maybe you can do the same as what you do for them???
darepublic 9mo ago
On Firefox mobile if I pick the last item then scroll up past the top of the first item and place it often doesn't reflect. There are probably other little bugs like this. Also if you pick and scroll past the area there was some jitter with the cancel and place options. Maybe need to deal with those edge cases. When it works well it is nice but I would be afraid to use something like this
coolThingsFirst 9mo ago
this is the dumbest thing that ive ever seen lmfao
warpech 9mo ago
I love this. We need more experimenting with UX status quo. Especially with drag and drop, which, I think all many would agree, is one of the not ideal UX patterns espacialy with scrolling involved. The research is never over. Good ideas, bad ideas, doesn't matter as long as they continue to inspire.
kira_aziz 9mo ago
so fun

455 points by bbx 9mo ago

qingcharles 9mo ago

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.

feep 9mo ago

https://github.com/jgthms/picknplace.js/ https://github.com/jgthms/picknplace.js/ Linked in page is 404.

gabrielsroka 9mo ago
Your link is 404 (is that what you meant?) Their page uses https://jgthms.com/picknplace.js/picknplace.js https://jgthms.com/picknplace.js/picknplace.js
bbx 9mo ago
Sorry, it's public now.

mrozbarry 9mo ago

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.

bramhaag 9mo ago

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.

Bolwin 9mo ago
Scroll up to what? The whole list fits on screen for me
anonymous908213 9mo ago
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 9mo ago
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.
whiterook6 9mo ago
Surely you're being hyperbolic. I've seen some atrocious UX before. Maybe what you mean is it's a good idea but the scrolling part should be list-based instead of page-based.
- polalavik 9mo ago
  No because what if the list is half cut off by the page but you want to go to the bottom? If it doesn’t scroll the page it’s even worse. If it does scroll the page it’s not great. It’s just bad design. Also not intuitive. I didn’t read the directions and it took me a couple seconds to get what was going on.
9mo ago

bangaladore 9mo ago

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 9mo ago
I just tried it? And it did something that seemed weird but reasonable.

fellowniusmonk 9mo ago

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.

nkrisc 9mo ago
Yes, the users must be wrong.

breadchris 9mo ago

wow! I love this solution. I agree on the pain of drag and drop on mobile.

loa_observer 9mo ago

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 https://github.com/Kanaries/graphic-walker you can see that there are different areas of draggable and droppable, on different directions.

jotaen 9mo ago

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 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.

killerstorm 9mo ago
> On desktop (using a mouse or trackpad), drag and drop actually works quite well. Strong disagree here. It is intuitive, it is easy to demonstrate. But it's not really convenient, especially on a trackpad. I have enough mouse agility to play RTS games but not to do a reliable drag-and-drop, especially in a complicated case - across windows, with scroll, etc.
- jrowen 9mo ago
  Yes, it can get tricky if you have to scroll a bunch, e.g. moving a file in a big directory into a subfolder, trying to hit that one pixel where it will scroll up, or using two other fingers to attempt to scroll, while holding the drag finger down...(CLI pros, you win this one). I would like a desktop pick and place that works like drag and drop, you click and then it sticks to the cursor, but you are free to do whatever gestures until you click again.
  - sunrunner 9mo ago
    > while holding the drag finger down I'm not sure if this is common on other desktop operating systems but the 'Drag Lock' feature on macOS allows you to double-tap an item, then drag it without holding the button down to begin a drag. At that point lifting your finger continues the drag until you tap once to release it. I would be amazed at how many people using macOS have never found this option except I'm not sure I've ever seen it being called out as a feature, and nowadays it's also buried deep under Accessibility settings (the irony) instead of just being a Trackpad option, so a lot of users might not even think to go there.

ndgold 9mo ago

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

aitchnyu 9mo ago

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

nvader 9mo ago

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

deleted 9mo ago

[deleted]

nkrisc 9mo ago

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

codeptualize 9mo ago

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 9mo ago
I wonder if a stack metaphor would work for that. So that N items are no bigger than 2 items.

css_apologist 9mo ago

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 9mo ago
That's a great idea actually. I'd have to find a way to highlight the possible landing spots.
- css_apologist 9mo ago
  (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]"; }
iamwil 9mo ago
I was expecting that the line item would move with my mouse movement, not with my scroll.

topaz0 9mo ago

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 9mo ago
These feel like fixable things.
- topaz0 9mo ago
  The ones that are moving the wrong item to the wrong place are fixable, but there will always be a problem when scrolling is quantized if there is a possibility that any item in the list is shorter than the scroll quantum.
  - awinter-py 9mo ago
    dom scroll event interceptor maybe?
- webstrand 9mo ago
  Somewhat shockingly, apparently DOM does not give access to the raw scrollwheel data.
ljouhet 9mo ago
I have a regular scroll wheel and it moves two items each time. Totally unusable for me. (great idea, though)

sgt 9mo ago

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

hysan 9mo ago

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.

victorbjorklund 9mo ago

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

racl101 9mo ago

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.

paxys 9mo ago

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.

euph0ria 9mo ago

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".

woodpanel 9mo ago
Came here to write the same. Give it some visual state of “pickedness“ (e.g. by displaying this state as elevated). But in any case, great stuff!
hinkley 9mo ago
CSS outline would be a good visual indicator here as it won’t modify the page layout.

mattacular 9mo ago

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.

hinkley 9mo ago

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.

flowerthoughts 9mo ago

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.

kej 9mo ago

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.

hmokiguess 9mo ago
Yessss this exactly! Moving songs up/down in large playlists would be fun with this concept. I wish that was a thing for music apps.

hoppp 9mo ago

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

jmisavage 9mo ago

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.

mentalgear 9mo ago

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

dzogchen 9mo ago

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

lylejantzi3rd 9mo ago

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.

stevenhubertron 9mo ago

The amount of time it took me to figure out how to use this I am embarrassed to say was too long.

nkmnz 9mo ago
Yeah me too. It was only on third try that I realized I shouldn't move the cursor but just scroll :D

untech 9mo ago

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 - You click on the item itself to place, or possibly anywhere on the screen

cosmic_cheese 9mo ago
Came to say that it badly needs better state communication. What I’d do is to add a drop shadow and increase scale by 1-3%, with a clean, snappy animation between placed and picked up. I might also add a “gripping hand” graphic with a cursor-like appearance to picked up items and show a “scroll to move” instruction next to the hand graphic if the user hasn’t done anything for a couple of seconds.

recursive 9mo ago

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 coordinates of the top to the bottom.

leptons 9mo ago
It seems like it only works on pages that scroll, which is not good. I deleted the <header> and <footer> elements on the page, and was unable to anything but "cancel" after clicking "pick". Also did not work setting max-height on the <main> element and overflow-y:scroll, even though I could scroll the items did not scroll with it. It is an experiment and probably doesn't have every implementation detail covered yet.

agumonkey 9mo ago

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

ickelbawd 9mo ago

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.

wnevets 9mo ago

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

gaigalas 9mo ago

Ditch the scroll. Pick: all previous "Pick" buttons become "Place". You choose one. Done. Simple, explicit, intuitive.

will_walker 9mo ago

As a ux designer, I like this, especially as it solves the problem of dragging mobile elements below the fold or off the visible screen view. One suggestion I'd love to try out- let the user select multiple elements at once, and reorder the selected elements in the hovering state using conventional drag and drop mechanics. This might add complexity or might be a much more convenient way to deal with lists! Or, dragging the element selected should allow a user to manually ‘place’ the item on screen. I wouldn’t use this on desktop, though! Mice typically allow you to scroll and drag pretty easily.

killerstorm 9mo ago

Nice. I actually did something similar 25 years ago, I called by think "pick-and-put". At that time I switched from MS-DOS environment to Windows 98. And as I was trying new UI features, I found drag-and-drop incredibly annoying. Especially if you do it between different windows, it requires a lot of movements, etc. I had an idea that going further into skeuomorphism can make things better, so I started experimenting with 3D UI, particularly, a file manager with 3D UI. And as an alternative to drag-and-drop I designed pick-and-put. It's actually very simple: right mouse button picks up an object and you get a symbol of that object next to the cursor. Then a click onto empty space puts it there. Or you can click a copy button which would copy it, etc. I think it could work really well if we got a convention that some mouse button always picks an object. But we don't. I don't think there's a way to make it works in the same way on desktop and mobile in a way which would be good. On desktop you have a mouse pointer, and you can easily represent point of insertion. For mobile you came up with this scroll trick, but I think many people would find it unintuitive and annoying - especially on desktop.

csmantle 9mo ago

This actually caused a constant switching of attention on mobile. Each time an element is picked up I'll have to look at the bottom toolbar, then the floating element in the center, then back to the bottom to place it, so on and so forth. And the list in the demo is not that long yet. ------ Will this work on lists that sre short? It seems that it relies on overflow to move the element

Sn0wCoder 9mo ago

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. Might want to show some text 'Now Scroll' with up/down arrows to the left or right of the list. Seems ok when the list is in the middle of the page and you already have room to scroll up and down, but how is it going to work when the list is at the top or bottom of the page? Or when the page is so short it does not scroll at all? I suppose you could have the container scroll but then it needs to be considerable larger than the list. Honestly when you click 'Pick' all of the others should say 'Place' would be more intuitive and give the user options to support both. As they use it they will pick up they can scroll if they want.

Timwi 9mo ago

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 top and bottom). These buttons are positioned absolutely, so there is no reflow from stretching the list. The location where you ‘place’ the item is where you click, not dependent on scroll position. Without even planning for use on mobile it ended up “just working” on mobile because you only need to tap buttons.

jahsome 9mo ago

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.

msla 9mo ago
What a useless piece of snark.

lloydatkinson 9mo ago

Doesn't do anything in Edge?

ajkjk 9mo ago

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).

joshribakoff 9mo ago

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

hmokiguess 9mo ago

I think you could play with sticky footers, sticky headers, and some active styling indicators like opacity and background plus highlights to let the user know they are in scroll mode. Really fun idea, love this! Wish Apple Music UI for moving songs on playlists had that. Holding my dumb while dragging is suboptimal comparing to click and scroll.

CGamesPlay 9mo ago

OK, so I get that you're trying an alternative on the metaphor that drag and drop uses. The metaphor is "pick up the item, move it, then drop it", but the implementation doesn't work well on mobile, so you made it modal. But for me scrolling feels like "pick up the item, move the rest of the world so the item above the target, then drop it". It feels very strange. As an refinement, I would keep the modality but add back in the dragging paradigm. Use a typical "move item" scrubber control, but have that control switch the item to a floating modality, and give it "send back" and "drop here" buttons. The user can drag the item, scroll, interact with the page, and the item stays with them to get where they want to go. Here is a crude mockup: https://excalidraw.com/#json=9DwYqkWRhdEgEEqyzY7X8,fCdPzIzTmzKoSBpcF89yFw https://excalidraw.com/#json=9DwYqkWRhdEgEEqyzY7X8,fCdPzIzTm...

thunderbong 9mo ago

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 around 'Pick' to indicate it as an action 2. Once an item is picked, add a mask on the whole page, with only the picked item in front of the mask. (This is going to be a bit challenging, I'm guessing, to show the gaps between the items as you scroll) 3. Once an item is picked, the 'Cancel' and 'Place' bar should have a background. Sometimes this overlaps the list and is not clearly visible. 4. It should not be possible to scroll way above or below the list. 5. On 'Cancel' scroll back to the item. Again, congratulations! It's one thing to think of something, quite another to be able to implement it nicely.

uxamanda 9mo ago
Yes! This is very cool. Should be somewhat “locked” into the right area of scroll and picked item should have some height above the others.
savolai 9mo ago
+1 inspiring and relevant to a project i am working on. I would suggest having the place button next to/in the item being dragged like Pick. When learning to use this, having it at a distance creates unnecessary cognitive burden. Also, I would probably make the entire item clickable for pick, if there didn’t have to be a click target on the item for other functionality.
rendaw 9mo ago
I also hate drag and drop. It'd be good if when you picked something it automatically added the border too - otherwise I think this won't work on short pages? I have some hesitations though - relying on scroll as the positioning method means that if you don't have a fine-grained scroll method e.g. on desktop, if you have a non-continuous wheel, you'll need to rely on "drag and dropping" the scroll bar, which doesn't really improve things (and has its own issues if your page is very long). I think I'd prefer something other than scroll-to-position. Like what about making gaps between items with a "drop" button? Or adding up/down arrow buttons to the "picked" element so that fine grained adjustments could be done?

alexjray 9mo ago

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.

wild_pointer 9mo ago

9/10 for originality. 2/10 for usefulness. Not bashing, that's how good ideas are found. But not this time IMO :)

m3sta 9mo ago
I disagree.
- wild_pointer 9mo ago
  OK.

deskman 9mo ago

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!

cindyllm 9mo ago
[dead]

yojo 9mo ago

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 things to the side (“pick”) to add them to the cursor. You then moved the cursor to the desired location and tapped it to dump the contents (“place”). My biggest problem with the OP implementation is the “place” button can be far from the “pick” button. Why not just leave it on the moving element - change the label from “pick” to “place” and call it a day.

stephenlf 9mo ago

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 possibility of interacting with the rest of the screen while an element is picked. Eg you could navigate a directory tree while finding the right place to put a file. Though I guess it’s similar to cut/paste in that respect.

bbx 9mo ago
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. But you're right, it's probably a better experience.

fitsumbelay 9mo ago

I'm old enough to remember when using a mouse felt like being unchained. I also remember how quickly dragging began to feel like a time waste, even more so after spending more time on CLIs than GUIs. So though this seems limited to vertically arranged DOM things it's very cool for eliminating the least productive/most frustrating stage of drag-drop interactions Would love to see this work with keyboard only

jon_richards 9mo ago

But how are you going to replace the OG? https://mrcoles.com/dragondrop/ https://mrcoles.com/dragondrop/ (Ironically doesn’t work on mobile)

kaizenb 9mo ago
sounds effects on! piuww piuwww! waaaaa I'm going to eat youuu!
rasso 9mo ago
Amazing, thanks! Didn't know this one yet :)

popalchemist 9mo ago

Unresponsive in chrome, even in incognito.

mwillis 9mo ago

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. Having the “place” action hover near the selected object could be an alternative. I really enjoy this pattern. Nice work.

chanux 9mo ago
cancel place should have some kind of a separator between them. I thought it is to cancel placing instead of two options to cancel or place.

benatkin 9mo ago

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.

nurettin 9mo ago

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

jkrubin 9mo ago

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”

dash2 9mo ago

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.

bryanhogan 9mo ago

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.

Mikhail_Edoshin 9mo ago

Apple Newton had a way to drag/copy things around, a visual clipboard of sorts. They used a stilus, so it's similar. You drag an object to a side of the screen, where it turns into a visible but small handle and stucks. I think it could stay there any time and you could have several objects arranged this way. Then you can go anyplace, including a different application. Once you're in the right place, you could drag an object back and put it where you wanted to put it.

pwdisswordfishy 9mo ago
Apple Newton had smell-o-vision? It was really ahead of its time.
- Mikhail_Edoshin 9mo ago
  Did I write that? Oh, right. Fixed. Thanks!

digitaltrees 9mo ago

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 congratulations on getting something out for comment rather than over building. 1. It will be more intuitive if you can long press or click on the item rather than have to click the "pick" link. That behavior is too deeply ingrained from drag and drop at this point. 2. It would help to show place locations where it will be inserted between objects. I found myself instinctively scrolling up and down to line it up perfectly because it just didnt feel likely to succeed if it wasnt properly placed in the middle, and the absence of visual cues make it seem like I needed to me more accurate with my placement. Overall cool concept and good work. Keep it up.

hnlmorg 9mo ago

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 than good UX. If I struggled then I really can’t see this working for non-technical folk. Worse yet, because people wouldn’t expect this behaviour coupled with the fact that scrolling shouldn’t have any changes to the website state, you’ll likely see people constantly making accidental changes to the ordering of the list.

px1999 9mo ago

This is really nice and a very original take. It feels good on mobile / other touch devices. I'd love to see it feel a bit more polished on desktop (maybe I'll give that a shot if I find a bit of spare time!) - I could see a few simple things like adding up/down arrows to the picked item and wiring into up and down arrow presses going a long way to making it work really well there too. Genuinely, thank you for sharing this, it's something different and interesting.

d--b 9mo ago

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…

anigbrowl 9mo ago

Do like

chrismorgan 9mo ago

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 of a list to the top: • With traditional drag-and-drop: press in the middle (long press or regular press on a movement grabby), drag upwards, release. • With this: tap in the middle, on the item, then press anywhere, drag down, release. It’s uncomfortable. The logical entity you’re manipulating is the item, but you’re having to do it by interacting with the list, and if your drag starts on the item it’ll achieve the opposite of what you want. It may also interact a little poorly with retracting browser chrome, which is very common on mobile. I’d definitely say it does on Firefox for Android with top address bar. As for other platforms… ouch. With a precise touchpad it’s bizarre and uncomfortable but functional (though the scroll direction thing will probably hit even harder and be even more frustrating); with a mouse with indexed scrolling it’s fairly fundamentally unusable. All up, although it’s an interesting direction to explore, I don’t like it at all at present, and doubt the scrolling aspect can be salvaged. Direct manipulation is good.

gurghet 9mo ago
I agree, this doesn't make sense. Also how can you place the item when there is no space to put it? If you want to mimic reality you should: 1) drag and drop outside of the list the item you want to move putsode the list 2) drag and drop the item in the place you want to put your selection 3) place your pick in the empty space 4) quietly discard the item you dislodged 5) wait for people to point out you are now missing one item 6) drag and drop the person under the carpet 7) repeat until no criticism

cmos32 9mo ago

[dead]

polyterative 9mo ago

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

theF00l 9mo ago

Awesome! How do you think this compares to the pattern in iOS (and I think Android) where you hold an app icon and the rest start jiggling and then you can tap a folder to move it there (or also drag it). They feel quite similar but am no UX expert.

fbn79 9mo ago

With my mouse gear scroll is impossible to select the desired position. It jump always 2 steps.

seqizz 9mo ago
Yeah and not many people are complaining about this. Feels like almost everyone has smooth scrolling by default.

Parmacoy 9mo ago

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 accidental finger release on touch devices for example. I think this has potential for accessibility, just at the moment your demo page has issues in certain cases. (Different behaviour experienced on iOS 26.2 Safari vs commonly used WebView containers and/or websites masquerading as apps. If you test the following (edge) cases in a webview. 1. Pick item One, try and move it down. You will find item Two goes along for the ride, and when you drop it, item One stays at the top and item Two is dropped instead. 2. No matter what I tried in the webview, I was unable to purposefully move an item to First or Last position. Weirdly this doesn’t occur for me in dedicated safari. I have looked at drag and drop libraries for use on mobile and feel your approach has the potential to be more intuitive, especially for the use cases I have. Thanks for sharing a new approach.

amadeuspagel 9mo ago

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

progx 9mo ago

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.

Zealotux 9mo ago
I would argue this is a mobile-centric solution, for desktop you could still have the classic drag-and-drop, actually both can coexist.

busfahrer 9mo ago

Slightly off-topic, but I'd love for someone to invent mouse hover that works on mobile, without any hardware support like detecting finger hovering or the likes. Any ideas?

qwertytyyuu 9mo ago

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

grimgrin 9mo ago

only slightly similar, on desktop when making a visual selection, dragging cursor from x,y to another x,y then releasing? i'll run into problems with early releases sometimes, could be hardware, network, whatever if the tool i'm using has this option, i will use it and love it: -D, --nodrag Allows you to click twice to indicate a selection, rather than click-dragging. that's from maim, idk what else does it, but i prefer "nodrag" to "drag-and-drop" or "drag-and-release" picknplace reminded me of it

nailer 9mo ago

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.

oakwhiz 9mo ago

To me the problem with drag and drop is not only that it has to be a single continuous motion, but that nothing else interrupts you at an inconvenient time while you are doing it. The consequences of an incorrect drag and drop can be confusing. This "pick and place" UI is more precise and less error prone but a lot less convenient. Maybe there is a middle ground.

ericskiff 9mo ago

Awesome to see real UX experimentation, and this elicited a strong response from me at first "oh I haaaaate that". On further reflection, this is very interesting and I understand where the drag and drop interaction breaks down on long lists. Some additional UI affordances to communicate what's happening may make it intuitive and clear. Things I'd want to experiment with if I was implementing this: * A "wheel" effect where the items in the list grow slightly as they near the chosen item which stays locked in the interface at the center, popping into place at at each 'click'. Somewhat like the Price Is Right wheel flipper * Making the interaction entirely scroll based once I click. Setting the item in place can be done by any other click or keypress, and cancelled with the escape hotkey. My interaction is pick, scroll, click (without having to aim back at the thing I just placed by scrolling)

halapro 9mo ago

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 similar but less obtrusive would be to show "drop here" buttons after you "pick" an item. No sticky element on screen, clear followup action that doesn't require exact scrolling position.

heroku 9mo ago

[dead]

elgertam 9mo ago

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 right) past center; the "place" button is quite unintuitive and should be placed nearer to the pick-n-place container, or even on the selected element itself; and the position of the selected element isn't quite right, though this seems more like a bug. Keep iterating! Drag-n-drop is good on desktop, but I disprefer it for mobile.

XCSme 9mo ago

Awesome! Is it actually working well? Not really, at least not at this stage. But it's cool to see a new UX idea.

cyrusradfar 9mo ago

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 to actually add a drop shadow/scale/border and ideally there should be a hole where it was that makes it clear that you are holding it. Not trying to diminish, but this pattern has other uses already. Anyone who builds accessibly for folks who use keyboard and no mouse. Tab/arrows to highlight, Enter to select, Arrows to move, Enter to drop.

toobulkeh 9mo ago

What if picking took the item out to the side in a specific place. Like a little basket or drawer

huflungdung 9mo ago

[dead]

layer8 9mo ago

That’s how “Choose on map” works on Google Maps on touch devices.

callumgare 9mo ago

Very cool! If you’re looking for an example of this UI to compare how others have implemented it take a look at the move function in the mobile app for https://anytype.io https://anytype.io I’ve recorded an example of it in use: https://youtube.com/shorts/T3_8HIbHlls https://youtube.com/shorts/T3_8HIbHlls

fitsumbelay 9mo ago

Made this week's Javascript Weekly https://javascriptweekly.com/issues/766 https://javascriptweekly.com/issues/766

ebiester 9mo ago

For a UX pattern, I will often need to move multiple items at the same time. I'd like an exploration that allows the equivalent of shift-click and command-click for multi-select. And if they're not consecutive, they should be grouped. Otherwise, it's going to be a very frustrating experience to move a number of things.

robocat 9mo ago

@bbox FYI: I noticed a bug on iPhone SE running 26.2 with tabs set to "bottom" in settings. Scroll so that 10 is near bottom of screen. Pick 10, then scroll up a bit. The bottom 10 element then gets lost and you can't see it. I suspect because Safari expands the size of its controls at the bottom. The cancel + place buttons stay sticky to the bottom of the screen correctly, so maybe you can do the same as what you do for them???

darepublic 9mo ago

On Firefox mobile if I pick the last item then scroll up past the top of the first item and place it often doesn't reflect. There are probably other little bugs like this. Also if you pick and scroll past the area there was some jitter with the cancel and place options. Maybe need to deal with those edge cases. When it works well it is nice but I would be afraid to use something like this

coolThingsFirst 9mo ago

this is the dumbest thing that ive ever seen lmfao

warpech 9mo ago

I love this. We need more experimenting with UX status quo. Especially with drag and drop, which, I think all many would agree, is one of the not ideal UX patterns espacialy with scrolling involved. The research is never over. Good ideas, bad ideas, doesn't matter as long as they continue to inspire.

kira_aziz 9mo ago

so fun