问如何使用jQuery UI使元素可拖动，但不能拖动其子元素？

EN

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

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

JS Fiddle demo。

除了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。现在也可以选择普通的文本节点。如果之后动态添加更多的文本节点到draggable元素中，情况就会发生变化。然后你必须再把它们包起来。

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

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

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

Plunkr example