如何使用 jQuery UI 使元素可拖动，而不是其子元素？答案

【问题标题】：How can I make an element draggable, but not its child elements, using jQuery UI?如何使用 jQuery UI 使元素可拖动，而不是其子元素？
【发布时间】：2011-12-30 16:03:21
【问题描述】：

例如，我想要这个：

<div class="draggable">
<p>Text that can be selected</p>
</div>

【问题讨论】：

@AymanSafadi，我一开始也是这么想的。但不是：我非常确定他希望用户能够选择段落中包含的文本，而无需在可拖动的父元素上启动拖动操作。

标签： jquery jquery-ui

【解决方案1】：

您可以使用cancel 选项，该选项接受一个选择器，用于选择不允许拖动的可拖动对象的子元素：

$('.draggable').draggable({cancel : 'p'});

JS Fiddle demo.

【讨论】：

这适用于 p 元素，但子元素可以是任何元素，甚至是文本节点。问题是“但不是它的子元素”。有什么想法吗？
我添加了一个答案，它提供了一种可能的方法来选择所有子节点和文本节点的其他方法。

【解决方案2】：

除了 p 之外，还可以有其他元素作为子元素。在这种情况下，您必须使用空间选择器：

$(".draggable").draggable({cancel: ".draggable *"});

工作示例位于JSFIDDLE。

它使用空间选择器，它选择元素的所有子元素，无论它们是子还是孙子。 w3schools 的空间选择器示例。

这样做的缺点是所有文本节点都必须包裹在标签内，例如。跨度，div，p。如果它们不在标签内，则 * 选择器无法匹配它们。为了保持纯文本节点的可选性，您必须使用更复杂的代码，因为 CSS 和 jQuery 不包含纯文本节点的选择器。你可以例如。使用您自己的标签来包装文本节点。自定义节点的原因是它减少了这个自定义元素被意外设置样式的可能性（比如使用 span 等时），在这种情况下我们将其命名为“自定义”：

$(".draggable").draggable({cancel:'.draggable *'})
.contents().filter(function() {return this.nodeType == Node.TEXT_NODE;})
.wrap('<custom></custom>');

以上JSFIDDLE。现在也可以选择纯文本节点。如果您之后动态地将更多文本节点添加到可拖动元素中，情况会发生变化。然后你必须再次包装它们。

【讨论】：

【解决方案3】：

您可以覆盖start 函数作为初始化选项的一部分。在这里返回 false 会过早地摆脱它。要访问单击时创建的鼠标事件，可以访问 jQuery 事件的 originalEvent 属性。

$(".draggable").draggable({
  start: function(event, ui) {
    return event.originalEvent.target === this;
  }
});

这允许只有父级是可拖动的。您可以将this 替换为您希望成为唯一可拖动项的任何元素，只需确保它是要比较的dom 节点。

Plunkr example

【讨论】：