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

Post by css_apologist » Thu, Dec 18, 2025, 9:35 PM UTC

bbx wrote: post #25

css_apologist wrote: post #20

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

That's a great idea actually. I'd have to find a way to highlight the possible landing spots.

    :has(.pnp-picked) .pnp-item:not(.pnp-picked):not(:last-child)::after {
        content: "[place]";
    }

Post by hinkley » Thu, Dec 18, 2025, 9:45 PM UTC

Post by kej » Thu, Dec 18, 2025, 9:48 PM UTC

Post by hinkley » Thu, Dec 18, 2025, 9:50 PM UTC

topaz0 wrote: 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.

Post by hinkley » Thu, Dec 18, 2025, 9:52 PM UTC

codeptualize wrote: post #19

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…