Live data from Hacker News

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

jgthms.com

61–70 of 158 posts

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

#61
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

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

#62
post #13

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

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

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.

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

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

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

#64
post #62

Earlier quoted context omitted.

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

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

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

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

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

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

#70
post #35

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.

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