Live data from Hacker News

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

jgthms.com

111–120 of 158 posts

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

#111
post #21

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.

I have a regular scroll wheel and it moves two items each time. Totally unusable for me.

(great idea, though)

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

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

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

#115

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…

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

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

#117
post #103

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 yo…

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…

Take inspiration from ghetto sim racing setups (which are also implemented by some middle click scroll versions) and use the mouse cursor y position relative to the picked object as scroll velocity instead of destination position. Change cursor to up/down. Needs some vertical space above the list though.

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

#118

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 yo…

Thanks, that's great feedback.

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

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

#119

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.

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.
Post reply on HN