Javascript 如何使元素只能在一个点上拖动？

我有一个父div（比如“#strip17”）和几个子div。许多子div包含每个画布，用户应该能够在画布上使用鼠标绘制内容。除了最后一个子div之外，它应该是用户能够抓取父div并拖动它的点

整个（父）div需要是可拖动的，这样用户就可以在“抓取”子级抓取它，并在需要的地方将其丢弃。如果愿意，我需要某种“句柄”来拖动父div

我这里的问题是：我只能在父-子对象上调用.draggable（），这意味着用户无法在任何子div内的任何画布元素上绘制（因为绘制被解释为拖动），或者我在拖动子div（“.cumber move”）上调用.draggable（），这意味着只有这个div在移动，而父div的其余部分将保持在可绘制的位置

我想，通过调用“.cumber move”上的.draggable（）并以某种方式说服jQuery UI不仅移动“.cumber move”div，而且移动其父项“#strip17”，这应该是可行的。但是怎么做呢

// '#<newStripID>' is the ID of the parent element
// '#<newStripID> .camber-move' is the ID of the element which should be the 'grab-handle'
$('#' + newStripID).draggable({
     "containment": "#content"
});

/“#”是父元素的ID
//“#.曲面移动”是元素的ID，该元素应为“抓取手柄”
$（'#'+newStripID）.可拖动({
“包含”：“内容”
});

html:

---

考虑以下演示：

您可以将此应用于您的示例：

$（函数（）{
$（“#条带17”）。可拖动({
遏制：“内容”，
手柄：“俯仰-移动”
});
});
.strip-cumber-1{
边框：1px实心#CCC；
}
.外倾角移动{
边框：2倍实心#222；
}

欢迎来到堆栈溢出。使用DragTable，可以将元素或对象定义为句柄。您可以将draggable分配给父级，然后将句柄分配给最后一个子级。非常感谢，非常有用！
<div id="strip17">
    <div class="strip-camber-1"><canvas></canvas></div>
    <div class="strip-camber-1"><canvas></canvas></div>
    <div class="strip-camber-1"><canvas></canvas></div>
    <div class="strip-camber-1"><canvas></canvas></div>
    <div class="camber-move"></div>
</div>