创建“单击并拖动”的方法；帆布“；使用Javascript和Jquery的用户区域？

我一直在拼凑我的一个项目，其中一个关键方面将是一个可拖动的“画布”——一个用户可以创建/销毁/拖放子元素的区域。我在下面创建了一个图表：

<>强>画布启动用户在中间的某个地方，允许他们点击和拖动来探索边缘；内容只能在“可视画布”窗口中查看。

鉴于用户创建的元素也可以拖动，我在考虑是否将“画布拖动”限制为仅当用户按住空格键时。。。但在我开始之前，我需要有人帮助我集思广益，找出完成“画布拖动”的方法

我想知道jQueryUIDragable的一些巧妙实现是否也可以用于画布，而不仅仅是它的子元素。想法

谢谢

编辑：

因此，为了不“费劲思考”，我概述了一种看起来“太简单而不真实”的方法。我从上面采用了相同的前提，但“画布”是一个比例较大的容器中的可拖动div：

有没有人有过（这家伙有问题）和/或比他们的观看空间大的拖拽物的经验？这个模型需要工作，因为画布中的可拖动子元素也可以工作

谢谢

更新：

使用and，我成功地创建了一个带有可拖动“节点”的可拖动“画布”。问题是拖动“节点”也会拖动“画布”——创建了一个很棒但不需要的（至少在现阶段）视差效果

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

我已经尝试使用停止传播：

$（'.node'）。单击（函数（e）{e.stopPropagation（）；}）

但那没用。要帮忙吗你是如此，如此接近。但是想想当你拖动时会发生什么。。。它以鼠标按下开始。“单击”是鼠标向下，然后是鼠标点击。如果你停止鼠标向下移动，而不是单击，你应该会得到想要的效果。
你是说用户可以画一个形状，然后拖动它吗？用户不画形状，而是“创建”它们——就像在软木塞上创建图钉注释一样。。。然后可以把软木塞拖来拖去。（如果你问的是这个问题，用户也可以拖动图钉注释。）几分钟前，在查看mapbox源代码时，我也有类似的想法
单击
，然后
mousemove
就是我尝试停止传播的那个，但你成功了
mousedown
是停止在…上传播的命令。。。检查！！到目前为止看起来很酷。。。有兴趣看看这个项目进展如何！
.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;
}