I have the following setup for a responsive website.


download bmml source – Wireframes created with Balsamiq Mockups

The problem I'm running into is that on mobile devices, when the sidebar is expanded, it looks like this:


download bmml source

As you can see, there's not a whole lot of area available in the drop zone when viewing on a mobile device. Are there any alternative UI/UX patterns for adding content to a content area on mobile devices?

1 Answer 1


When the item is being dragged, the panel could hide itself or move out of the way. Check out these demos from Codrops for inspiration. (Your interaction would be the opposite of most of these, but the principle is there.)

Drag and drop example from Codrops (link above)

Or, the panel could be on the top or bottom on mobile, instead of the side. This might be even more effective if the content is conducive to being arranged horizontally instead of vertically. (e.g. photos, objects with icons/thumbnails and short labels)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.