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

Question

我有一个 parent div（如“#strip17”）和几个 child div。其中许多 child div 包含每个 canvas 用户应该能够使用鼠标在其上绘制内容。除了最后一个 child div，这应该是用户能够抓住 parent div 并拖动它的地方。

整个 (parent) div 需要是可拖动的，这样用户就可以在“抓取”-child 处抓取它，然后将其放在需要的地方。如果你愿意，我需要某种 'handle' 来拖动 parent div。

我的问题是：我只能在 parent child 上调用 .draggable()，这意味着用户无法在任何 canvas 任何 child div 内的元素（因为绘图被解释为拖动），或者我在 drag-child-div (".camber-move") 上调用 .draggable()，这将意味着只有这个 div 在移动，而 parent div 的其余部分将留在原处 - 尽管可以绘制。

我想，这应该可以通过在“.camber-move”上调用 .draggable() 并以某种方式说服 jQuery-UI 不仅移动“.camber-move”div，还有它的 parent“#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"
});

html:

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

Answer 1

考虑以下演示：https://jqueryui.com/draggable/#handle

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

$(function() {
  $("#strip17").draggable({
    containment: "#content",
    handle: "div.camber-move"
  });
});

.strip-camber-1 {
  border: 1px solid #CCC;
}

.camber-move {
  border: 2px solid #222;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>

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

How can I make an element draggable only on one point?

javascript

css

jquery

jquery-ui