私は私のプロジェクトをまとめました。重要な側面の1つは、ユーザーが子要素を作成/破棄/ドラッグアンドドロップすることができるドラッグ可能なキャンバスです。私は下の図を作成しました：JavascriptとJqueryでクリックアンドドラッグの "キャンバス"ユーザ領域を作成する方法は？
が
キャンバスエッジを探索するためにクリックアンドドラッグして、それらをできるように、途中でどこかにユーザーを開始します。コンテンツは「表示可能なキャンバス」ウィンドウ内でのみ見ることができます。
ユーザーが作成した要素もドラッグ可能であると見て、ユーザーがスペースバーを押したままにしておくと、「キャンバスのドラッグ」を制限することを考えていたのですが、 「キャンバスドラッグ」を達成するためのブレーンストーミング方法を助けてください。
私はJquery UI draggableのいくつかの巧妙な実装を、その子要素だけでなく、キャンバスにも使用できるのだろうかと思います。思考？
ありがとうございます！
編集：「本当であるには余りにも簡単な」そうではないしようとする試みには「一生懸命考えて、」私は表示されたアプローチを概説しました
私は、上記と同じ前提を取ったが、「キャンバス」は比例してより大きな容器内部のドラッグ可能div要素です：
誰もがnested draggables（この男が持っていた問題、）、および/またはdraggablesの経験を持っています彼らの視聴空間よりも大きい？このモデルは、キャンバス内のドラッグ可能な子要素も同様に機能するので、機能する必要があります。
ありがとうございます！
。 。 。
更新：
はMapboxとjQuery UI Draggableを使用して、私はドラッグとドラッグ可能な 'キャンバス' が正常に作成した 'ノードを'。問題は、「ノード」をドラッグすると「キャンバス」もドラッグされるため、（少なくともこの段階では）驚くばかりの不要な視差効果が作成されることです。
の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"> </div>
</div>
</div> <!--viewport-->
CSS：
$('.node').click(function(e){ e.stopPropagation();});：私はすでに停止伝播を使用してみました
.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;
}
しかし、それは何もしなかった。少しの援助？ ：D
あなたは、ユーザーがシェイプを描いてそれをドラッグできると言っていますか？ – Zevan
ユーザーはシェイプを描かず、コルクボードにサムネイルを作成してから、コルクボードをドラッグすることができます。 （あなたが尋ねているのであれば、ユーザーはサムタックノートをドラッグすることもできます。） – jlmakes