Изменение размера изображения, а затем перетаскивание должны остановиться на границах изображения

Question

Я пытаюсь создать систему, в которой пользователь может загрузить изображение, изменить его размер, а затем перетащить его, чтобы поместить фокус в нужную точку изображения.

Проблема, с которой я столкнулся, заключается в том, что если Например, я изменяю размер изображения до 18%, затем я могу перетащить изображение влево, но затем изображение перетаскивается так далеко, что появляется белый фон.

Как остановить перетаскиваемый элемент, если он достигает границы изображения?

См. мой код здесь: http://jsfiddle.net/46noe7f5/

HTML:

<div align="center">

        <div id="canvas" style="margin: auto; height: 150px; width: 150px; background-color: #f00; overflow: hidden;">
            <div class="ui-widget-content" style="padding: 0px;">
                <div id="picturecontainer">
                    <img id="image" src="https://www.itl.cat/pngfile/big/15-157104_sunset-scenery-wallpaper-hd-wallpapers-of-sunset.jpg" class="headerimage ui-corner-all" style="border-radius: 0px;" />
                </div>
            </div>
        </div>

        <br /><br />

        <div id="slider"></div>
        <span id="infoSlider"></span>

        <br /><br />

        <input id="fromTop" />
        <br />
        <input id="fromLeft" />

    </div>