To make a draggable pane you need two elements, an outer div to act as a container, and an inner div to act as a 'canvas'. The outer container needs to have its style set to overflow: hidden
.
<div id="drag-container">
<div id="drag-canvas"><img></div>
</div>
Next you need to make your inner canvas draggable. On mouseDown
on the inner, call a function that sets a variable dragging = true
. On mouseUp
call a function that sets it to false
. You'll want to also store the mouse position on mouseDown
and subtract the top and left position of the inner div so you can use that as an offset.
Then on mouseMove
have the inner canvas' top and left position set based on the mouse position. Don't forget to add the offset so that the inner canvas drags from the point which you grabbed it at, otherwise the top left corner of the div will snap to the mouse position.
There are also several libraries, like JQuery UI that has a "draggable" method you can apply to a div directly, simplifying this process. The real key is to have the outer container set with a hidden overflow.