HN Reader

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

101

2 days agoby bbx

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.

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.

7 hours agoby killerstorm

This looks like an interesting concept!

> I find that the drag and drop experience can quickly become a nightmare, especially on mobile.

To me, drag and drop is only a nightmare on mobile. On desktop (using a mouse or trackpad), drag and drop actually works quite well.

Your design experiment reminds me of a recent talk of Scott Jenson, where he talked about how we just took over established UX patterns from desktop to mobile as is, and how that created all sorts of nuisances. (https://youtu.be/1fZTOjd_bOQ?t=1565)

If mobile drag&drop was implemented like you are suggesting from the very start, I actually might have preferred that over the situation we now ended up with.

One technical note on your implementation: on certain mobile browsers, there is a glitch where the UI can jump around as the browser dynamically slides top or bottom menu bars in and out.

2 days agoby jotaen

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.

2 days agoby bramhaag

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.

9 hours agoby lylejantzi3rd

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.

8 hours agoby will_walker

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.

10 hours agoby topaz0

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

10 hours agoby css_apologist

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.

10 hours agoby codeptualize

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.

2 days agoby bangaladore

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

9 hours agoby stevenhubertron

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.

9 hours agoby recursive

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