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

For example, I want to have this:

例如，我想要这样：

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

3 个解决方案

#1

You can use the cancel option, which accepts a selector for child elements of the draggable object that should not allow dragging:

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

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

JS Fiddle demo.

JS小提琴演示。

#2

There can be other elements as children than p. In this case you have to use space selector:

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

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

The working example is at JSFIDDLE.

工作示例位于JSFIDDLE。

It uses space selector, which selects all children of element whether they are children or grand children. Space selector example at w3schools.

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

The downside of this is that all the textnodes have to be wrapped inside tag, eg. span, div, p. If they are not inside tag, the * selector cannot match them. To remain plain textnodes selectable, you have to use more complex code, because CSS and jQuery doesn't contain selector for plain textnodes. You can eg. use your own tag for wrapping textnodes. The reason for custom node is that it decreases the possibility for this custom element to be styled accidentally (like when using span etc.), in this case we name it 'custom':

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

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

The above at JSFIDDLE. Now also plain textnodes are selectable. Things changes if you add dynamically afterwards more textnodes into the draggable element. Then you have to wrap them again.

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

#3

You can override the start function as part of the options to initialization. Returning false here will break out of it prematurely. To access the mouse event created when clicking, you can access the originalEvent property on the jQuery event.

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

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

This allows for only the parent to be draggable. You can replace this with whatever element you want to be the only draggable item, just make sure it is the dom node getting compared.

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

Plunkr example

Plunkr的例子

#1