如何使用jQuery UI创建一个可拖动的元素,而不是它的子元素？

Question

例如,我想要这样:

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

Answer 1

您可以使用该cancel选项,该选项接受不应允许拖动的可拖动对象的子元素的选择器:

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

JS小提琴演示.

Answer 2

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

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

工作示例位于JSFIDDLE.

它使用空间选择器,它选择元素的所有子元素,无论它们是子元素还是大元素元素.w3schools的空间选择器示例.

这样做的缺点是所有文本节点都必须包含在标签内,例如.span,div,p.如果它们不在标记内,则*选择器无法匹配它们.要保持纯文本节点可选,您必须使用更复杂的代码,因为CSS和jQuery不包含纯文本节点的选择器.你可以,例如.使用您自己的标记来包装文本节点.自定义节点的原因是它降低了这个自定义元素被意外设置的可能性(比如使用span等),在这种情况下我们将其命名为'custom':

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

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