How to create a custom canvas area with click and drag with Javascript and JQuery?

Question

I combined my project, and one of the key aspects will be the draggable "canvas" - the area in which users can create children / destroy / drag -n-drop. I created the chart below:

Canvas launches the user somewhere in the middle, allowing them to click and drag to explore the edges; content is displayed only in the "visible canvas" window.

When I saw that the user-created elements would also be dragged, I thought about restricting the "dragging the canvas" only when the user clicks and holds the space ... but before I get to it, I need help brainstorming to complete " banner of canvas. "

, JQuery UI draggable , . ?

!

Edit:

, " ", , " , ". , "" - div :

- draggables ( ) / , ? , .

!

.,.

Update:

Mapbox jQuery UI Draggable, "" "node". , "node" "" - , ( ) .

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;
}

:

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

. ?: D

Answer 1

, . , , ... . A "click" - , . mousedown, , .