In the case of having such a large drag box how should I be ensuring the user can still interact with the content of the page. E.g make sure the hitbox isnt over the top of links and that users can still highlight text etc?
I recommend using the excellent Hammer.js[0] library to pick up swipes (since that's the gesture you're looking for). I've put together a small proof-of-concept here[1]. Try it out on your phone.
Alternatively, if you wanted to have some slick dragging action (so that a user could swipe a little, and control the rate at which the menu drawer opens), you could put a smaller (maybe 10-20% width) dragbox along the left-hand-side of the screen, and keep your selectable content to the right of that.
Alternatively, if you wanted to have some slick dragging action (so that a user could swipe a little, and control the rate at which the menu drawer opens), you could put a smaller (maybe 10-20% width) dragbox along the left-hand-side of the screen, and keep your selectable content to the right of that.
[0] http://eightmedia.github.io/hammer.js/
[1] http://codepen.io/notduncansmith/full/sthyJ/