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

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.

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.

It seems like it only works on pages that scroll, which is not good. I deleted the and elements on the page, and was unable to anything but "cancel" after clicking "pick". Also did not work setting max-height on the 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.

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.

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.