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

例如，我想要这样：

 
Text that can be selected
  

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(''); 

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

Answer 3

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

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

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

Plunkr的例子