Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

jgthms.com

Post reply on HN
Print view View original

121–130 of 158 posts

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

#121

Post by cyberrock »

bbx wrote: post #118
thunderbong wrote: post #75

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.

Another suggestion is showing an empty slot (selected item with less opacity and dotted border?) and displacing/scaling the picked item to show that it's been picked up. I would immediately connect it to picking up a book, CD, etc. from a shelf.

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.

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

#124

Post by Parmacoy »

Hey @bbx,

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.

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

#129

Post by grimgrin »

only slightly similar, on desktop when making a visual selection, dragging cursor from x,y to another x,y then releasing? i'll run into problems with early releases sometimes, could be hardware, network, whatever

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.
that's from maim, idk what else does it, but i prefer "nodrag" to "drag-and-drop" or "drag-and-release"

picknplace reminded me of it

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

#130

Post by Zealotux »

progx wrote: post #126

One HUGE problem, what if you set you wheel to scroll faster in the browser? Currently your example scroll always 3 items, i can't move only 1 down or up.

I would argue this is a mobile-centric solution, for desktop you could still have the classic drag-and-drop, actually both can coexist.
Post reply on HN