Question

例如，我想要这个：

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

Answer 1

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

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

JS Fiddle demo

Answer 2

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

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

工作示例位于JSFIDDLE。

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

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

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

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

Answer 3

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

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

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

Plunkr example

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

3 个答案: