Question

Let’s say i have an area e.g. 200px by 100px. And instead of selecting a crop inside that field, I want the field itself to be the crop area and I drag the image instead of the crop field.

So you can see the edges of the full image, but you only see the image inside the crop area. You drag the image around and you see the changes within

Answer 1

Here’s a simple little concept. It’ll need some refining to make sure you can’t drag outside the bounds (if you start your drag on the red bordered div it doesn’t apply the containment rule), but this should provide a proof of concept.

http://jsfiddle.net/foxwisp/G7cEP/1/

Basically you just update the position of the mask box so that it isolates, and then update the background image position so it appears to move.

Let me know if you need me to explain it further.