Phone screen list item selection to replace drag / drop

Question

I'm designing an app that will require the user to select a single item from a scrollable list and add it to a chat box that resides at bottom of a chat panel.

For wider screen web/tablet/iPad interfaces, I'll probably use drag-drop to add the item from the list with the list being on either left hand side (LHS) or right hand side (RHS) of the chat dialogue.

For smaller phone sized screens, the screen width will probably prevent having a LHS/RHS list panel. I could have a pull down list panel at the top but this would probably clash with existing pull-down on iPhone so I'm after some alternative design ideas to solve this.

Ideas/Issues:

• We will have a number of different type of objects we can add to a chat session so it could be integrated into [+] button beside the chat box.

• Users may switch from iPad to iPhone (or Android or web) so visual cues need to feel familiar and related as they transition between devices.

If you know of an existing app that solves this problem or you may have a specific solution in mind. Thanks very much!

P.S. I'm aware of this related question but it does not work for my app: - What is a small screen alternative for drag and drop?

Answer 1

A [+] or attachment button in the chat box would be a better solution here as it can also ensure cross-platform compatibility. You can tap/click on the attachment button and you can call an attachment layover with "easeInOutExpo" effect. You can then either choose an item from the layover or tap/click anywhere to dismiss it. I think this will not eat up any real estate and would also not be distracting for the user. A list panel would suffer from both. Also, "drag and drop" is more of hassle as compared to a simple "tap and select".

^{download bmml source – Wireframes created with Balsamiq Mockups}