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

Posted 2023-05-08

【中文标题】如何使元素只能在一点上拖动？

【英文标题】：How can I make an element draggable only on one point?

【发布时间】：2021-08-14 02:43:55

【问题描述】：

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

整个（父）div 必须是可拖动的，这样用户可以在“grab”-child 处抓取它，并将其放在需要的地方。如果你愿意，我需要某种“手柄”来拖动父 div。

我的问题是：我只能在父子元素上调用 .draggable()，这意味着用户无法在任何子 div 内的任何画布元素上绘图（因为绘图被解释为拖动） ，或者我在 drag-child-div （“.camber-move”）上调用 .draggable()，这意味着只有这个 div 正在移动，而父 div 的其余部分将保持在原位 - 虽然是可绘制的。

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

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>

【问题讨论】：

欢迎来到 Stack Overflow。使用 Draggable，您可以将元素或对象定义为句柄。您可以将 draggable 分配给父级，然后将句柄分配给最后一个子级。

【参考方案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>