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:
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?
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.)
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)
