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

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

“画布”将用户启动到中间的某个位置,从而允许他们单击并拖动以浏览边缘.内容只能在“可见的画布”窗口中查看.

看到用户创建的元素也将是可拖动的,我正在考虑也许仅在用户按住空格键时才将“画布拖动”限制为……但在此之前,我需要集思广益的方法来帮助完成“画布拖动”.

我想知道是否可以将Jquery UI Draggable的某些巧妙实现也用于画布,而不仅仅是其子元素.有什么想法吗？

谢谢！

编辑：

因此,为了尽量避免“这么费力地思考”,我概述了一种看起来“过于简单以至于无法实现”的方法.我从上面采取了相同的前提,但是“ canvas”是一个比例较大的容器中的可拖动div：

是否有人对nested 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">&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

解决方法:

你是如此的亲密.但是请考虑一下,当您拖动鼠标时会发生什么……它是从鼠标按下开始的. “单击”是指按下鼠标并随后按下鼠标.如果停止mousedown的传播,而不是单击,您将获得所需的效果.

标签：web-applications,javascript,jquery
来源： https://codeday.me/bug/20191208/2095077.html