jQuery SVG: drag shapes & prevent overlap?

jQuery SVG: drag shapes & prevent overlap?

I've been using the SVG plugin from Keith Wood, which is awesome. I struggled with trying to implement raphael and other libraries until I found SVG and it's working very well.

What I need now though is to make the drawn shapes (rectangles only) draggable.

Also, I need to be able to prevent the user from drawing objects that overlap.

Any ideas would be very much appreciated. Below is my code. It's mostly the standard SVG code for drawing rectangles, however, I've set it to snap to a 10x10 grid inside the div I've created.

  1.             var drawNodes = [];
                var sketchpad = null;
                var start = null;
                var outline = null;
                var offset = null;
                 
                $(document).ready(function() {
                    $('#svgsketch').svg({onLoad: function(svg) {
                        sketchpad = svg;
                        var surface = svg.rect(0, 0, '100%', '100%', {id: 'surface', fill: 'transparent'});
                        $(surface).mousedown(startDrag).mousemove(dragging).mouseup(endDrag);
                   }});
                });
               
                /* Remember where we started */
                function startDrag(event) {
                    offset = ($.browser.msie ? {left: 0, top: 0} : $('#svgsketch').offset());
                    if (!$.browser.msie) {
                        offset.left -= document.documentElement.scrollLeft || document.body.scrollLeft;
                        offset.top -= document.documentElement.scrollTop || document.body.scrollTop;
                    }
                    start = {X: (Math.round(event.clientX/10)*10) - (offset.left + 3), Y: (Math.round(event.clientY/10)*10) - offset.top};
                    event.preventDefault();
                }
                 
                /* Provide feedback as we drag */
                function dragging(event) {
                    if (!start) {
                        return;
                    }
                    if (!outline) {
                        outline = sketchpad.rect(0, 0, 0, 0,
                            {fill: 'none', stroke: '#c0c0c0', strokeWidth: 1, strokeDashArray: '2,2'});
                        $(outline).mouseup(endDrag);
                    }
                    sketchpad.change(outline, {
                          x: ((Math.round(event.clientX/10)*10) - offset.left, start.X),
                        y: ((Math.round(event.clientY/10)*10) - offset.top, start.Y),
                        width: (Math.round((event.clientX - offset.left)/10)*10) - ((Math.round(start.X)/10)*10),
                        height: (Math.round((event.clientY - offset.top)/10)*10) - ((Math.round(start.Y)/10)*10)
                    });
                    event.preventDefault();
                }
                 
                /* Draw where we finish */
                function endDrag(event) {
                    if (!start) {
                        return;
                    }
                    $(outline).remove();
                    outline = null;
                    drawShape((Math.round(start.X/10)*10), (Math.round(start.Y/10)*10), (Math.round(event.clientX/10)*10) - (offset.left + 3), (Math.round(event.clientY/10)*10) - offset.top);
                    start = null;
                    event.preventDefault();
                }
                 
                /* Draw the selected element on the canvas */
                function drawShape(x1, y1, x2, y2) {
                    var left = Math.min(x1, x2);
                    var top = Math.min(y1, y2);
                    var right = Math.max(x1, x2);
                    var bottom = Math.max(y1, y2);
                    var settings = {fill: '#CCC', stroke: '#000', strokeWidth: 1};
                    var node = sketchpad.rect(left, top, right - left, bottom - top, settings);

                    drawNodes[drawNodes.length] = node;

                    $(node).mousedown(startDrag).mousemove(dragging).mouseup(endDrag);

                    $('#svgsketch').focus();
                };