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.
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.
For number 2, that should be possible, since I have the position of each item in the list (and the position of the list itself. Using a <canvas> might be the way to go.
For number 4, my main concern would be that it would feel like "scroll-hijacking". What I did however is prevent the picked item from going beyond the list, in both directions.
Number 5 is a good idea as well, easy to implement.
I think you should add some kind of marker to show where the item was picked up from and thus what would happen if the operation was cancelled, and an empty slot is perfect for that.
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.
When you have scrolling set to more than one line at a time, the item movement skips down multiple spots at a time. For example, when I click pick and scroll down once, it jumps down two spots (One moves to between Three and Four).
When I clicked Pick, it wasn't obvious to me what I was doing next. At first, I scrolled and didn't even notice it moved. I think the post I'm replying to includes changes that would remove that issue, so I'm mostly just re-iterating the idea that it needs more obvious clues as to what's going on.
Very cool, though
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?
> 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.
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.
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.
From my experience, there's nothing convenient about a trackpad; pretty much ever. About the only thing they do better than a normal mouse is scrolling left/right, and that's only marginally. I bring a mouse with me when I take my laptop somewhere because I hate the trackpad so much.
I have a feeling it makes RSI worse.
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.
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.
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.
If when in pick mode you would only scroll the list, I would be able to organize it much faster.
Pretty hyperbolic. First of all, this is a human and their work you’re talking about. A little respect goes a long way. Secondly, if this is the worst UX you’ve ever seen on mobile, I have to assume you’ve only been using the internet for the past week or so. This experience worked great for me on mobile Safari with no instructions required. You can’t say that for a lot of mobile UX including, I might add, Safari itself.
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.
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.
(great idea, though)
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
here's a basic CSS starting point
:has(.pnp-picked) .pnp-item:not(.pnp-picked):not(:last-child)::after {
content: "[place]";
}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)
But, that's on desktop. The scrolling works a lot better on mobile.
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.
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.
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.
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,fCdPzIzTm...
(Ironically doesn’t work on mobile)
Keep iterating! Drag-n-drop is good on desktop, but I disprefer it for mobile.
- 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
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.
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.
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.
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.
Pick: all previous "Pick" buttons become "Place". You choose one.
Done. Simple, explicit, intuitive.
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.
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.
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???
I’ve recorded an example of it in use: https://youtube.com/shorts/T3_8HIbHlls
The research is never over. Good ideas, bad ideas, doesn't matter as long as they continue to inspire.
Would love to see this work with keyboard only
This is much better on mobile and I suspect for accessibility.
------
Will this work on lists that sre short? It seems that it relies on overflow to move the element
Otherwise, it's going to be a very frustrating experience to move a number of things.
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.
Not bashing, that's how good ideas are found. But not this time IMO :)
Potential bug: The first time I tried it on my iPad, it didn’t place the item, but it did on subsequent uses.
They feel quite similar but am no UX expert.
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.
picknplace reminded me of it
Any ideas?
Linked in page is 404.
Their page uses https://jgthms.com/picknplace.js/picknplace.js
- Zoom out after drag start and back in when hovering over items.
- Drag to a staging area/clipboard.
you can see that there are different areas of draggable and droppable, on different directions.
Is it actually working well? Not really, at least not at this stage. But it's cool to see a new UX idea.
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.
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.
thanks for sharing