November 28, 2019

Building a Responsive Drag and Drop UI

Graeme @graeme

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:

  1. 2

    Great work on this. I've always been mystified by drag and drop apps. I have plans to make one for 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.📸-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 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 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

Today's Top Milestones
  • Reached $1000 on Plant My Forest
    We just plant more than 333 trees ! with 28 customers :) ---- Plant My Forest, a place where you plant a forest, for real! 🌳 Plant trees to stop clim
  • Same names. New look.
    Product Names looks different!? For those following the project, I recently updated the color scheme and logo. I wanted more simplicity in the design
  • Interview on Indie Hackers
    We did a text interview with Indie Hackers today! We talked about how we got started, what our journey has been like, and our goals for the future, as
  • 2nd Birthday & Launched New SaaS Boilerplate
    I'm super excited to be celebrating Gravity's second birthday today with the launch of v6. I launched Gravity as a side-project two years ago today ri
  • Released version 1.2
    For various reasons, I neglected Estipad for well over a year. I’m very excited to announce v1.2, which includes many improvements. They’re mainly foc
  • Best Booking Forms Templates For your Business
    Booking forms are one of the most resourceful forms you can have on your business. They are practical and can collect any essential information you ne
  • Beta-launched
    I have launched the Beta version of KitDB ( with its bare minimal functions. I hope to complete building the database within the ne
  • 200K podcast downloads in 5 months
    This morning I checked my analytics and saw that Creative Elements broke 200K downloads! It took a little over four months to break 100K, and then tha
  • 1st paying member of Recoon!
    Yes, we did it, we got the first paying member in Recoon community. Also a small retrospective on our Producthunt launch yesterday. - we went to 10th
  • Launched on No Code Founders
    I launched on No Code Founders in two ways... - Added a startup listing to the site's directory. - [I