currently I am using Raphael.js to drag and drop a circle around a canvas. However, I would like to disallow the user to drag the circle out of the canvas. My code is generally as follows:

```
<script type="text/javascript" src="Javascript/raphael.js"></script>
    <script type="text/javascript">
        window.onload = function() {  
            //create canvas matching the image's dimensions
            var paper = new Raphael(document.getElementById('canvas_container'), <%=width%>, <%=height%>);

            //put the schematic image onto the canvas
            paper.image("<%=path%>",0,0,<%=width%>,<%=height%>);

            //create the marker on the canvas
            var c = paper.circle(<%=markerx%>, <%=markery%>, 5).attr({
                fill: "#800517",
                stroke: "none"

            });
            var start = function () {
                // storing original coordinates
                this.ox = this.attr("cx");
                this.oy = this.attr("cy");                    
            },
            move = function (dx, dy) {
                // move will be called with dx and dy
                if (this.ox + dx >= <%=width%> || this.oy + dy >= <%=height%>){
                    this.attr({cx: <%=width%>, cy: <%=height%>});
                }else{
                    this.attr({cx: this.ox + dx, cy: this.oy + dy});
                }
            },
            up = function () {
                // restoring state                    
            };

            c.drag(move, start, up);

        }
    </script> 

```

I was wondering if there was anyone out there who has tried to do something like this and managed to get it right.