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/

Graeme

, Founder of

Letter

on November 28, 2019

Likes

Say something nice to graeme…

Post Comment

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-🔥/

lwdthe1

·
6 years ago
·
Reply
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?
  
  Graeme
  
  ·
  6 years ago
  ·
  Reply
  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.
    
    lwdthe1
    
    ·
    6 years ago
    ·
    Reply
    1. 2
      
      That sounds cool, I am happy to send feedback as you make it!
      
      Graeme
      
      ·
      6 years ago
      ·
      Reply
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

darafsheh

·
6 years ago
·
Reply
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
  
  Graeme
  
  ·
  6 years ago
  ·
  Reply