A way to create a click-and-drag "canvas" user-area with Javascript and Jquery?

I've been piecing together a project of mine, and one of the key aspects will be a draggable "canvas"--an area in which users can create/destroy/drag-n-drop child elements. I've created a diagram below:

The Canvas starts the user somewhere in the middle, allowing them to click-and-drag to explore the edges; the content is only viewable within the "viewable canvas" window.

Seeing as the user-created elements will be draggable as well, I was thinking about maybe restricting the 'canvas drag' to only when the user presses and holds space bar... but before I get to that, I need help brainstorming ways to accomplish the 'canvas drag.'

I'm wondering if some clever implementation of the Jquery UI draggable could also be used for the canvas, and not just its child elements. Thoughts?

Thanks!

Edit:

So in an attempt to not "think so hard," I've outlined an approach that appears 'too simple to be true.' I took the same premise from above, but the 'canvas' is a draggable div inside a proportionately larger container:

Does anyone have any experience with nested draggables (this guy had problems,) and/or draggables larger than their viewing spac开发者_如何学Ce? This model needs to work, inasmuch as the draggable child elements within the canvas work as well.

Thanks!

. . .

Update:

Using Mapbox and jQuery UI Draggable, I've successfully created a draggable 'canvas' with a draggable 'node.' The problem is that dragging the 'node' drags the 'canvas' as well--creating an awesome, but unwanted (at least at this stage) parallax effect.

Jquery :

$(function() {
     $('#viewport').mapbox();
     $('.node').draggable({containment:"#canvas", scroll:false});
});

HTML :

<div id="viewport">
    
    <div id="canvas" style="background: url('image/1k_square.jpg') no-repeat; width: 1000px; height: 1000px;">
        <div class="node">&nbsp;</div>
    </div>
</div> <!--viewport-->

CSS:

.node { 
     position : relative;
     margin : 0 auto;
     background : rgba(255,255,255,.2);
     width : 118px; 
     height : 118px; 
     z-index : 100;
     border : 1px dotted black;
}

#viewport { 
     width: 520px;
     height: 520px; 
     margin: 20px auto; 
     overflow: hidden;
}

I've already tried using a stop propagation:

$('.node').click(function(e){ e.stopPropagation();});

but that didn't do anything. A little help? :D

You are so, so close. But think about what happens when you drag... it starts with a mousedown. A "click" is a mousedown followed by a mouseup. If you stopPropagation of mousedown, instead of click, you should get the desired effect.