展示 HN:Picknplace.js,一个拖放的替代方案。
Show HN: Picknplace.js, an alternative to drag-and-drop

原始链接: https://jgthms.com/picknplace.js/

为什么?我发现拖放体验很容易变成一场噩梦,尤其是在移动设备上。同时尝试点击、按住、拖动和滚动,既笨拙又缓慢且容易出错。我一直想用一种更简单的两步方法:先选择一个项目,然后放置它。所以我实现了这个基本版本来展示我的想法。它是如何工作的?当选择一个项目时,原始列表的副本会创建在上面。这个副本是交互式的,并且会根据滚动位置进行更新。最后,用户可以确认或取消更改。这是一个库吗?不完全是。这仅仅是一个概念验证,为了传达我的想法。但是,你可以查看源代码以获取灵感。

## Picknplace.js:一种拖放替代方案 Picknplace.js 是一个新的 JavaScript 库,它提供了一种“先选取再放置”的两步方式来重新排序项目,作为传统拖放的替代方案,尤其是在移动设备上,拖放操作可能比较繁琐。用户首先“选取”一个元素,然后滚动到目标位置进行放置,而不是连续的拖动。 虽然旨在解决拖放的可用性问题,但初步反馈表明存在一些用户体验方面的担忧。许多用户觉得界面不直观,需要说明文档才能理解操作流程。常见的批评包括整个页面滚动而不是仅滚动列表,导致放置困难,以及滚动轮的意外行为。 改进建议包括突出显示潜在的放置位置,限制滚动到列表本身,并可能将选取和放置与标准的拖放结合起来,以提供更灵活的体验。尽管评价褒贬不一,但该项目被定位为一个实验,并且创建者乐于接受反馈。
相关文章

原文

Why?

I find that the drag and drop experience can quickly become a nightmare, especially on mobile.

Trying to tap, hold, drag, and scroll, all at the same time, is awkward, slow, and error-prone.

I've long had in mind a simpler 2-step approach: picking an item first, then placing it.

So I implemented this basic version to showcase my idea.

How does this work?

When picking an item, a duplicate of the list is created on top of the original one.

The duplicate is interactive and animated, and will update based on the scroll position.

At the end, the user can either confirm or cancel the changes.

Is this a library?

Not exactly. This is merely a proof of concept, to convey what I had in mind.

You can however look at the source code, for inspiration.

联系我们 contact @ memedata.com