javascript - JQuery UI Draggable 设置与元素不同的 hitbox 或设置多个元素

Question

我遇到一个问题，我正在尝试将可拖动应用于外部库的某些弹出元素(我无法修改它们)。

问题是，这个弹出窗口的最外面的 div 实际上稍微在它外面，并且高度为 0(它是一个箭头形状的 div，有点像对话框气球)，所以它不能正确地与遏制一起工作。

我可以选择内部元素作为选择器(这是实际的弹出边界框)，但箭头元素不会随弹出窗口移动。

如上所述，我无法以将它们分组在一起的方式修改这些元素(实际上我什至无法访问源代码，在开发人员控制台中执行此操作)，那么我该如何解决这个问题？我想继续使用 JQuery UI，但如果不可能，我愿意接受替代方案。

我尝试了多个选择器，但它不会移动箭头 div :

$( ".dialogArrow, #popupDiv" ).draggable({ scroll: false });

示例代码:

<div class="dialogArrow" style="height:0; width: 100%; background: red">I'm the parent but my hitbox is wrong
    <div id="popupDiv" style="height: 200px; width: 200px; background: green">actual hitbox</div>
    <div>i need to move togheter too</div>
</div>

JSFiddle:https://jsfiddle.net/hvkh7mmq/5/

Answer 1

您可以使用handle选项(demo)。就像这样:

$(function() {
  $(".dialogArrow").draggable({
    handle: "div#popupDiv",
    scroll: false
  });
});

工作示例:https://jsfiddle.net/Twisty/hvkh7mmq/3/

我没有看到指向您的选择器的点，因为您想要拖动父元素，而不是将 .draggable() 分配给两个元素。由于父级没有可呈现的 HTML，因此本质上无法单击它。因此，使用 handle 选项，我们可以指定可以单击的内容。

附加

如果您在拖动后检查元素，您将看到类似以下内容的内容:

<div class="dialogArrow ui-draggable" style="height: 0px; width: 100%; background: red none repeat scroll 0% 0%; position: relative; left: 107px; top: 30px;">
  <div id="popupDiv" style="height: 200px; width: 200px; background: green; cursor: inherit;" class="ui-draggable-handle">actual hitbox</div>
  <div id="other div that needs to move togheter"></div>
</div>

结构没有改变。所有 3 个元素均已移动。