[{"data":1,"prerenderedAt":780},["ShallowReactive",2],{"project-46290349":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":48,"post_text":52,"what":53,"said":81,"maker_in_thread":248,"shape":255,"grid":260,"attempts":741,"same_week":742,"maker_shows":383,"maker_hidden":772,"reader_version":773,"card":774},"46290349","Picknplace.js","An alternative to drag-and-drop","title","Show HN: Picknplace.js, an alternative to drag-and-drop","https:\u002F\u002Fjgthms.com\u002Fpicknplace.js\u002F","jgthms.com","bbx",1765901526,2025,455,152,89,3837,3,"legend","languages","javascript ui interaction library","library",[24,25,26,27,28],"drag and drop","mobile reordering","pick and place","javascript","list reorder","mixed",-0.125,{"positive":32,"neutral":33,"mixed":34,"critical":35},27,32,24,39,122,{"design":38,"execution":41,"idea":44,"docs":46},{"positive":39,"critical":40},12,16,{"positive":42,"critical":43},0,15,{"positive":39,"critical":45},7,{"positive":42,"critical":47},1,[49,18,50,42,42,47,47,18,50,18,18,18,18,51,47,18,47,18,50,47,51,47,49,18,47,47,50,51,51,51,47,51,18,50,50,18,18,50,51,51],5,2,4,"I find that the drag and drop experience can quickly become a nightmare, especially on mobile. To tap, hold, drag, and scroll, all at the same time, is both difficult to achieve, and prone to errors. I've always had in mind this 2-step approach, where picking an element and placing it were two separate steps. So I implemented this basic version to showcase my idea.\n\nWhile it might take more time than a regular drag and drop, the benefit is for people who struggle with holding down the mouse button. With picknplace.js, you only need two clicks and some scrolling.\n\nThis solution is meant as an e",{"problem":54,"audience":60,"pricing":64,"motivation":65,"time_to_build":64,"stack":69,"openness":78,"stage":79,"team_size":80},{"value":55,"source":56,"evidence":57},"Drag and drop is hard on mobile, requiring tap, hold, drag and scroll together.","maker",[58],{"id":59},"post",{"value":61,"source":56,"evidence":62},"People who struggle holding the mouse button or dragging on touch devices.",[63],{"id":59},null,{"value":66,"source":56,"evidence":67},"Maker wanted to test a two-step idea that avoids holding and dragging.",[68],{"id":59},[70],{"value":71,"source":72,"evidence":73},"JavaScript","inferred",[74],{"id":75,"by":76,"text":77},"46290578","feep","https:\u002F\u002Fgithub.com\u002Fjgthms\u002Fpicknplace.js\u002F Linked in page is 404.","open_source","beta","unknown",{"praise":82,"objections":104,"requests":161,"questions":209,"alternatives":221},[83,99],{"value":84,"source":85,"evidence":86},"Original idea that is easier on mobile than drag and drop.","commenter",[87,91,95],{"id":88,"by":89,"text":90},"46292635","breadchris","wow! I love this solution. I agree on the pain of drag and drop on mobile.",{"id":92,"by":93,"text":94},"46319238","hinkley","It’s been a long time since I’ve said “woah” out loud to something that wasn’t a science video. This is much better on mobile and I suspect for accessibility.",{"id":96,"by":97,"text":98},"46324731","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…",{"value":100,"source":85,"evidence":101},"Good experiment that helps accessibility.",[102,103],{"id":96,"by":97,"text":98},{"id":92,"by":93,"text":94},[105,120,135,150],{"value":106,"source":85,"evidence":107},"Page or list scrolling while picked is disorienting and confusing.",[108,112,116],{"id":109,"by":110,"text":111},"46290747","bramhaag","On mobile this is a strong contender for the worst UX I've ever seen. The whole page moves, so you have to continously scroll back up after placing something. If when in pick…",{"id":113,"by":114,"text":115},"46321182","jahsome","On mobile I wish there were a way to lock the browser window from scrolling. It was really disorienting with both the window and the list item moving.",{"id":117,"by":118,"text":119},"46326933","elgertam","It's interesting and you should keep iterating. My critiques: it requires a scroll container with sufficient margin to move the top and bottom elements (or I guess left and…",{"value":121,"source":85,"evidence":122},"Picked state and place controls are unclear; users get stuck.",[123,127,131],{"id":124,"by":125,"text":126},"46326638","halapro","Love it but no one would understand this. I bet most people would just be \"stuck\" in the \"picked\" state and not know how to exit it, with an item covering the screen. Something…",{"id":128,"by":129,"text":130},"46323201","hnlmorg","I really don’t like this. It took me several attempts to figure out what was going on. And even after I had finally figured it out, it still felt more like a rendering glitch…",{"id":132,"by":133,"text":134},"46319868","stevenhubertron","The amount of time it took me to figure out how to use this I am embarrassed to say was too long.",{"value":136,"source":85,"evidence":137},"Breaks with indexed scroll wheels, which jump several items at once.",[138,142,146],{"id":139,"by":140,"text":141},"46318866","topaz0","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…",{"id":143,"by":144,"text":145},"46324598","fbn79","With my mouse gear scroll is impossible to select the desired position. It jump always 2 steps.",{"id":147,"by":148,"text":149},"46324850","progx","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.",{"value":151,"source":85,"evidence":152},"Place button is far from the picked item.",[153,157],{"id":154,"by":155,"text":156},"46321922","yojo","This reminds me of a UI pattern I saw in an old iOS comic reader (Comic Zeal) for organizing your comics. You had a horizontal rule that worked as a cursor. You could swipe…",{"id":158,"by":159,"text":160},"46322299","mwillis","The “place” aspect of the process needs some refinement. On iOS, it triggers the page bump (and necessitates and extra click) because it’s aligned at the bottom of the page.…",[162,176,187,201],{"value":163,"source":85,"evidence":164},"Show drop-position highlights between items.",[165,169,173],{"id":166,"by":167,"text":168},"46318839","css_apologist","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…",{"id":170,"by":171,"text":172},"46322903","digitaltrees","I did not like this as is and found it confusing, but think it has potential and with a few adjustments could be great. I am sure you might have been planning them, and so…",{"id":174,"by":11,"text":175},"46318927","That's a great idea actually. I'd have to find a way to highlight the possible landing spots.",{"value":177,"source":85,"evidence":178},"Make the picked item clearly highlighted, with a border or shadow.",[179,183],{"id":180,"by":181,"text":182},"46321663","thunderbong","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…",{"id":184,"by":185,"text":186},"46328648","cyrusradfar","Sharing some feedback and some broader context. I think it's said in other words elsewhere but the \"picked\" state needs to be clearer that it's picked up. What may be helpful is…",{"value":188,"source":85,"evidence":189},"Let only the list scroll, not the whole page.",[190,194,198],{"id":191,"by":192,"text":193},"46318984","paxys","Neat concept, but why scroll the entire page? It just ends up being distracting and confusing. Once you hit \"pick\" the scroll action should affect just the list and nothing else.",{"id":195,"by":196,"text":197},"46322110","stephenlf","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…",{"id":199,"by":11,"text":200},"46324377","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.…",{"value":202,"source":85,"evidence":203},"Allow long press or clicking the item itself to pick.",[204,205],{"id":170,"by":171,"text":172},{"id":206,"by":207,"text":208},"46319890","untech","It’s good, I like it. I think that it might become easier to use if: - The whole item is clickable for the pick - Picked state is indicated clearly, possibly by hovering the item…",[210],{"value":211,"source":85,"evidence":212},"How do items near the top or bottom move when the list cannot scroll far enough?",[213,217],{"id":214,"by":215,"text":216},"46321060","Sn0wCoder","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.…",{"id":218,"by":219,"text":220},"46319917","recursive","How move an item from the top to the bottom? Do you need to add 100% padding to the top and bottom of every list? Most lists can't be scrolled far enough to get the screen…",[222,233,244],{"value":223,"source":85,"evidence":224},"Drag and drop, including mrcoles dragondrop demo.",[225,229],{"id":226,"by":227,"text":228},"46322123","jon_richards","But how are you going to replace the OG? https:\u002F\u002Fmrcoles.com\u002Fdragondrop\u002F (Ironically doesn’t work on mobile)",{"id":230,"by":231,"text":232},"46323686","chrismorgan","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…",{"value":234,"source":85,"evidence":235},"Move buttons with drop-here targets between items.",[236,240],{"id":237,"by":238,"text":239},"46321181","Timwi","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…",{"id":241,"by":242,"text":243},"46291978","bangaladore","Given I need to read the instructions to understand how to use this, It's a no go for me. I clicked it and I thought there was a bug because I could only place on the element I…",{"value":245,"source":85,"evidence":246},"Apple alarm-style scroll picker.",[247],{"id":195,"by":196,"text":197},{"comments":51,"answered":42,"key":249},[250,253,254],{"id":251,"text":252},"46324373","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 \u003Ccanvas>…",{"id":174,"text":175},{"id":199,"text":200},{"commenters":256,"max_depth":257,"maker_replies":51,"first_comment_mins":258,"lifespan_hours":259},134,6,17,146,[261,263,267,270,274,278,280,283,287,291,295,299,303,306,308,310,313,315,318,321,323,327,328,329,330,333,336,339,342,346,350,353,355,356,358,361,363,366,369,373,375,376,378,381,385,389,390,391,394,396,400,402,405,408,409,412,415,417,420,422,424,427,429,433,436,438,440,441,446,449,451,454,457,459,462,464,467,471,473,474,476,478,482,486,490,494,497,501,503,507,510,514,518,522,526,530,534,537,539,543,545,548,552,556,560,564,568,572,576,579,581,585,589,593,596,600,603,605,608,612,616,620,624,628,632,636,640,644,648,652,656,660,664,668,672,676,680,682,686,690,694,698,702,706,710,713,717,721,725,729,733,737],[180,42,49,262,181,42],"maker\u002Fpositive\u002Fdesign",[264,42,49,265,266,42],"46322012","project\u002Fpositive\u002Fdesign","uxamanda",[268,42,49,265,269,42],"46322805","savolai",[271,42,18,272,273,42],"46323186","project\u002Fmixed\u002Fdesign","rendaw",[275,42,18,276,277,42],"46324326","project\u002Fneutral\u002Fdesign","baq",[251,42,42,279,11,47],"maker\u002Fneutral\u002Fdesign",[281,42,18,276,282,42],"46324463","cyberrock",[284,42,47,285,286,42],"46327524","project\u002Fcritical\u002Fexecution","RHSeeger",[288,47,18,289,290,42],"46294625","project\u002Fmixed\u002Fidea","jotaen",[292,47,42,293,294,42],"46320814","commenter\u002Fneutral\u002Fnone","killerstorm",[296,47,18,297,298,42],"46321050","project\u002Fneutral\u002Fidea","jrowen",[300,47,42,301,302,42],"46321124","other\u002Fneutral\u002Fnone","sunrunner",[304,47,42,293,305,42],"46321804","stonecharioteer",[307,47,42,293,302,42],"46323491",[309,47,42,301,290,42],"46323455",[311,47,42,293,312,42],"46326150","chuckadams",[314,47,42,301,286,42],"46327561",[316,47,42,301,317,42],"46326154","csomar",[319,47,42,301,320,42],"46356499","yencabulator",[230,50,47,322,231,42],"project\u002Fcritical\u002Fdesign",[324,50,47,325,326,42],"46323748","project\u002Fcritical\u002Fidea","gurghet",[170,18,18,272,171,42],[214,51,18,272,215,42],[109,49,47,322,110,42],[331,49,42,293,332,42],"46290972","Bolwin",[334,49,47,322,335,42],"46292838","anonymous908213",[337,49,18,276,338,42],"46318956","chipheat",[340,49,42,293,341,42],"46320329","whiterook6",[343,49,42,344,345,42],"46320644","commenter\u002Fcritical\u002Fdesign","polalavik",[347,49,42,348,349,42],"46321590","commenter\u002Fpositive\u002Fnone","adriand",[351,49,49,265,352,42],"46333999","replwoacause",[354,257,18,289,294,42],"46320806",[124,45,47,322,125,42],[139,357,47,285,140,42],8,[359,357,18,360,93,42],"46319289","project\u002Fneutral\u002Fexecution",[362,357,18,360,140,42],"46319896",[364,357,18,360,365,42],"46322113","awinter-py",[367,357,18,360,368,42],"46322185","webstrand",[370,357,18,371,372,42],"46323647","project\u002Fmixed\u002Fexecution","ljouhet",[166,374,18,276,167,42],9,[174,374,42,262,11,47],[377,374,18,276,167,42],"46319117",[379,374,18,276,380,42],"46322477","iamwil",[382,383,18,272,384,42],"46326476",10,"ericskiff",[386,387,18,272,388,42],"46319767",11,"lylejantzi3rd",[195,39,49,265,196,42],[199,39,42,279,11,47],[241,392,47,393,242,42],13,"project\u002Fcritical\u002Fdocs",[395,392,18,276,93,42],"46319367",[397,398,18,272,399,42],"46318830",14,"codeptualize",[401,398,18,297,93,42],"46319315",[403,43,49,265,404,42],"46323233","px1999",[406,40,18,289,407,42],"46321519","CGamesPlay",[226,258,47,325,227,42],[410,258,42,301,411,42],"46322985","kaizenb",[413,258,42,293,414,42],"46324552","rasso",[147,416,47,285,148,42],18,[418,416,18,297,419,42],"46325045","Zealotux",[117,421,18,272,118,42],19,[206,423,18,276,207,42],20,[425,423,47,322,426,42],"46320135","cosmic_cheese",[154,428,47,322,155,42],21,[430,431,18,297,432,42],"46322883",22,"Mikhail_Edoshin",[434,431,42,293,435,42],"46322905","pwdisswordfishy",[437,431,42,293,432,42],"46323336",[128,439,47,322,129,42],23,[96,34,18,371,97,42],[442,443,49,444,445,42],"46319265",25,"project\u002Fpositive\u002Fidea","kej",[447,443,49,444,448,42],"46321483","hmokiguess",[158,450,18,272,159,42],26,[452,450,47,322,453,42],"46322334","chanux",[455,32,47,325,456,42],"46320537","gaigalas",[132,458,47,322,133,42],28,[460,458,42,293,461,42],"46319901","nkmnz",[218,463,18,360,219,42],29,[465,463,47,285,466,42],"46320519","leptons",[468,469,49,444,470,42],"46320639",30,"will_walker",[184,472,47,322,185,42],31,[88,33,49,444,89,42],[191,475,47,322,192,42],33,[237,477,47,322,238,42],34,[479,480,47,285,481,42],"46336333",35,"darepublic",[483,484,47,285,485,42],"46333604",36,"robocat",[487,488,18,297,489,42],"46329962",37,"callumgare",[491,492,49,444,493,42],"46352479",38,"warpech",[495,35,49,444,496,42],"46322112","fitsumbelay",[498,499,18,289,500,42],"46326471",40,"oakwhiz",[92,502,49,444,93,42],41,[504,505,47,322,506,42],"46320945",42,"csmantle",[508,509,49,265,448,42],"46321510",43,[511,512,47,325,513,42],"46330443",44,"ebiester",[515,516,49,444,517,42],"46322376",45,"benatkin",[519,520,47,285,521,42],"46326246",46,"nailer",[523,524,47,322,525,42],"46299697",47,"aitchnyu",[527,528,47,322,529,42],"46318876",48,"sgt",[531,532,47,325,533,42],"46321870",49,"wild_pointer",[535,532,42,293,536,42],"46322335","m3sta",[538,532,42,293,533,42],"46336790",[540,541,18,371,542,42],"46319292",50,"jmisavage",[143,544,47,285,144,42],51,[546,544,42,293,547,42],"46326880","seqizz",[549,550,18,276,551,42],"46324429",52,"theF00l",[553,554,47,285,555,42],"46318904",53,"hysan",[557,558,42,301,559,42],"46324977",54,"grimgrin",[561,562,49,444,563,42],"46320407",55,"ickelbawd",[565,566,49,567,496,42],"46330187",56,"project\u002Fpositive\u002Fnone",[569,570,18,297,571,42],"46322765",57,"dash2",[573,574,18,276,575,42],"46319051",58,"euph0ria",[577,574,49,265,578,42],"46319091","woodpanel",[580,574,18,276,93,42],"46319339",[582,583,18,289,584,42],"46322863",59,"bryanhogan",[586,587,42,301,588,42],"46324878",60,"busfahrer",[590,591,49,265,592,42],"46319134",61,"mattacular",[75,594,18,595,76,42],62,"project\u002Fneutral\u002Fdocs",[597,594,42,598,599,42],"46291042","commenter\u002Fneutral\u002Fdocs","gabrielsroka",[601,594,42,602,11,47],"46291890","maker\u002Fneutral\u002Fdocs",[113,604,47,322,114,42],63,[606,604,42,293,607,42],"46333064","msla",[609,610,18,371,611,42],"46290735",64,"mrozbarry",[613,614,18,276,615,42],"46323381",65,"d--b",[617,618,49,444,619,42],"46319241",66,"flowerthoughts",[621,622,47,325,623,42],"46296947",67,"ndgold",[625,626,18,276,627,42],"46293707",68,"loa_observer",[629,630,49,265,631,42],"46322625",69,"jkrubin",[633,634,18,272,635,42],"46319387",70,"mentalgear",[637,638,18,371,639,42],"46327880",71,"XCSme",[641,642,18,276,643,42],"46322447",72,"nurettin",[645,646,18,297,647,42],"46329061",73,"toobulkeh",[649,650,47,285,651,42],"46318755",74,"nkrisc",[653,654,18,276,655,42],"46321562",75,"nvader",[657,658,18,595,659,42],"46321318",76,"ajkjk",[661,662,18,272,663,42],"46324931",77,"qwertytyyuu",[665,666,47,285,667,42],"46324734",78,"amadeuspagel",[669,670,47,285,671,42],"46321450",79,"joshribakoff",[673,674,18,297,675,42],"46329820",80,"layer8",[677,678,49,265,679,42],"46292572",81,"fellowniusmonk",[681,678,42,293,651,42],"46318767",[683,684,47,285,685,42],"46319268",82,"hoppp",[687,688,18,289,689,42],"46318911",83,"victorbjorklund",[691,692,49,444,693,42],"46321896",84,"deskman",[695,696,18,276,697,42],"46319694",85,"dzogchen",[699,700,18,272,701,42],"46318967",86,"racl101",[703,704,47,285,705,42],"46322135",87,"popalchemist",[707,708,18,289,709,42],"46323829",88,"qingcharles",[711,16,47,285,712,42],"46321218","lloydatkinson",[714,715,49,265,716,42],"46323734",90,"polyterative",[718,719,18,276,720,42],"46320446",91,"wnevets",[722,723,49,444,724,42],"46320037",92,"agumonkey",[726,727,18,289,728,42],"46321750",93,"alexjray",[730,731,49,567,732,42],"46323395",94,"anigbrowl",[734,735,49,567,736,42],"46353356",95,"kira_aziz",[738,739,47,325,740,42],"46342128",96,"coolThingsFirst",[],[743,748,753,758,763,767],{"id":744,"name":745,"points":746,"category":747},"46294144","fuzzycanary",373,"security_privacy",{"id":749,"name":750,"points":751,"category":752},"46234734","bidicalc",252,"dev_tools",{"id":754,"name":755,"points":756,"category":757},"46234186","Sim",240,"ai",{"id":759,"name":760,"points":761,"category":762},"46249538","uvm32",196,"infrastructure",{"id":764,"name":765,"points":766,"category":752},"46276002","Sqlit",190,{"id":768,"name":769,"points":770,"category":771},"46264657","UDP-7777",104,"productivity",false,"v2",{"id":775,"name":5,"line":6,"ai":772,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":776,"top":18,"kw":777,"maker":11,"domain":10,"tier":19,"attempts":42,"strip":778,"url":9,"mix":779,"praise":84,"objection":106,"sub":21},46290349,-0.12,[24,25,26,27,28],"5320011323333413132141531124441432233244",[32,33,34,35],1794036687527]