10
6 Comments

Building a Responsive Drag and Drop UI

You never know what size screen or device type someone will use when trying your app. If they use a mobile device, there’s a few more things to consider for drag and drop:

  • Drag Handle Size: On touch devices, should there be drag handles? Is the drag handle usable?

  • Touch Input: Touch is different from a mouse click.

  • Drag Surface: Maybe the entire component should be a draggable surface. If so, should there a button to activate drag mode? When the component is touched to drag, we need to make sure text isn’t highlighted by mistake.

I wrote all about building drag and drop for Letter here:

https://www.prototypr.io/2019/11/27/building-drag-drop-ui/

  1. 2

    Great work on this. I've always been mystified by drag and drop apps. I have plans to make one for manystories.com at some point in the next year, so I'm trying to gather as much knowledge as possible.

    Just a quick note: I can't click through to Letter from here -> "Made with ❤️ with Letter" on your newsletter. That's usually a great way to acquire new leads. https://www.prototypr.io/newsletter/issue-118-the-github-of-free-photos-📸-and-grab-a-free-design-domain-🔥/

    1. 1

      Thanks @lwdthe1! ahh my newsletter pages look terrible on the blog, I need to fix that and update the archive - forgot it was there!

      Sounds good, if there's any area you want more insight on with the drag and drop, let me know as I want to go into more depth ...but not sure which part would be most useful for people. What part of manystories.com will your drag and drop be for?

      1. 1

        I want to let users design their portfolio page, separate from their profile. It may be a connected product hosted elsewhere, but that's the idea.

        1. 2

          That sounds cool, I am happy to send feedback as you make it!

  2. 2

    This is a great piece @graeme!
    I would be very interested to collaborate on a drag and drop billing UI guide for servicebot.io with you :)
    Let me know if you're interested

    1. 1

      Thanks @darafsheh! I had gone through so much, felt I should share the learnings. I could have gone into more detail in so many areas! If there's any area you would like more on, let me know, maybe I can do a part 2.

      I'm really packed with building the app and producing more articles like this for the Prototypr platform. Although interested, I'm not sure how I'd fit in a collaboration. You can DM me graeme_fulton on twitter if you have more of an outline

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 48 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments $15k revenues in <4 months as a solopreneur 14 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 13 comments Use Your Product 13 comments